无法在悬停时正确显示整个导航下拉菜单中的所有数据

Question

bounty到期在5天内。该问题的答案有资格获得+ 100声望赏金。Catmandu希望对此问题引起更多关注：目前，我对此感到困惑，需要一个可行的解决方案

你好，我是NodeJ的新手。我使用EJS和Node使网站变得动态。我试图制作一个导航下拉菜单，其中包含三个级别，如下所示：-

现在我正试图模仿这个，这就是我得到的：-

下面是我在js文件中尝试过的代码：-

 MainCategory.find({},function(err, mainCategories){
      if(err){
          console.log(err)
      }else{
        app.locals.mainCategoriesHeader= mainCategories;

        mainCategories.forEach(function(mainCategories){
          var MC = mainCategories.slug;
          Category.find({mainCategory:MC},function(err,categories){
            if(err){
              console.log(err)
            }else{
              if (typeof categories !== 'undefined' && categories.length > 0) {
                console.log(categories);
              app.locals.categoriesHeader= categories;
             } 
            }
          })
        })
      }
    })

主要类别是第一级，类别是第二级，产品是第三级。并非所有主要类别都具有类别。

console.log(categories)显示的数据如下：-

[ { itemtype: 'Category',
    _id: 5de132feae17c83f989afda1,
    title: 'Nuts',
    slug: 'nuts',
    mainCategory: 'fasteners',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de13341ae17c83f989afda2,
    title: 'Screws&Bolts',
    slug: 'screws&bolts',
    mainCategory: 'fasteners',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de13351ae17c83f989afda3,
    title: 'Inserts',
    slug: 'inserts',
    mainCategory: 'fasteners',
    __v: 0 } ]
[ { itemtype: 'Category',
    _id: 5de16904acc2f532d4dca9c6,
    title: 'Brass Neutral Links',
    slug: 'brass-neutral-links',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de1691facc2f532d4dca9c7,
    title: 'Brass Terminal Contacts',
    slug: 'brass-terminal-contacts',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16940acc2f532d4dca9c8,
    title: 'Brass Earth Terminal Blocks',
    slug: 'brass-earth-terminal-blocks',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16963acc2f532d4dca9c9,
    title: 'Terminals For Connectors Earthing',
    slug: 'terminals-for-connectors-earthing',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16999acc2f532d4dca9ca,
    title: 'Brass Pin For Electrical Plugs',
    slug: 'brass-pin-for-electrical-plugs',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de169edacc2f532d4dca9cb,
    title: 'Copper & Aluminium Lugs',
    slug: 'copper-&-aluminium-lugs',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16a01acc2f532d4dca9cc,
    title: 'Battery Terminal',
    slug: 'battery-terminal',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 } ]
[ { itemtype: 'Category',
    _id: 5de16a2aacc2f532d4dca9cd,
    title: 'Aluminium Machined Parts',
    slug: 'aluminium-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16a5facc2f532d4dca9ce,
    title: 'Copper Machined Parts',
    slug: 'copper-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16a7bacc2f532d4dca9cf,
    title: 'Brass Machined Parts',
    slug: 'brass-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16abbacc2f532d4dca9d0,
    title: 'Forged Press or Hot Stamped',
    slug: 'forged-press-or-hot-stamped',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16ad3acc2f532d4dca9d1,
    title: 'Investment Casting',
    slug: 'investment-casting',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16af6acc2f532d4dca9d2,
    title: 'SS Machined Parts',
    slug: 'ss-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 } ]

下面是ejs文件：-

<li class="menu-has-children"><a href="/productlanding">Products</a>
          <ul>
            <% mainCategoriesHeader.forEach(function(mainCategories){ %>
            <li class="menu-has-children"><a href="/category/<%= mainCategories.slug %>"><%= mainCategories.title %></a>
              <ul>  
                  <% categoriesHeader.forEach(function(categories){ %>                              
                <li class="menu-has-children"><a href="/subcategory/Nuts"><%= categories.title %></a>
                  <ul>
                    <li><a href="/product/Hex-Nuts">Hex Nuts</a></li>
                    <li><a href="/product/Flanged-Nut">Flanged Nut</a></li>
                    <li><a href="/product/Castle-Nuts">Castle Nuts</a></li>
                    <li><a href="/product/Hex-Jam_Nuts">Hex Jam Nuts</a></li>
                    <li><a href="/product/Heavy-Hex-Nuts">Heavy Hex Nuts</a></li>
                    <li><a href="/product/Square-Nuts">Square Nuts</a></li>
                    <li><a href="/product/Furniture-Cap-Nuts">Furniture Cap Nuts</a></li>
                    <li><a href="/product/Acorn-Nuts">Acorn Nuts</a></li>
                    <li><a href="/product/Wing-Nuts">Wing Nuts</a></li>
                    <li><a href="/product/Flare-Nuts">Flare Nuts</a></li>
                    <li><a href="/product/Lock-Nuts">Lock Nuts</a></li>
                    <li><a href="/product/Hex-Coupling-Nuts">Hex Coupling Nuts</a></li>
                  </ul>
                </li>

                <% }) %>
              </ul>
            </li>
            <% }) %>
          </ul>
        </li>

如何显示每个主要类别的类别和每个类别的产品。请帮帮我。我已经对此坚持了很长时间。

Answer 1

在您的代码中，您有一个循环：

mainCategories.forEach(function(mainCategories){
              // removed code
              app.locals.categoriesHeader= categories;
              // removed code
        })

这里，您正在为app.locals.categoriesHeader分配一个值，该值在每次循环中都将被覆盖。因此，菜单中仅显示最后一个类别（machined-parts）。

您可以尝试将app.locals.categoriesHeader= categories行更改为mainCategories.subCategories= categories。然后在您的模板中，而不是：

<% categoriesHeader.forEach(function(categories){ %>

您可以使用：

<% mainCategories.subCategories.forEach(function(categories){ %>