javascript - 无法正确显示悬停时导航下拉列表中的所有数据
问题描述
您好,我是 NodeJs 的新手。我正在使用 EJS 和 Node.js 使网站动态化。我试图制作一个导航下拉菜单,其中包含三个级别,如下所示:-
以下是我在 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;
}
}
})
})
}
})
Main Category 是第一级,Category 是第二级,产品是第三级。并非所有主要类别中都有类别。
显示的数据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>
如何显示每个主要类别的类别和每个类别的产品。请帮帮我。我已经坚持了很长时间。
解决方案
在您的代码中,您有一个循环:
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){ %>
推荐阅读
- java - 当我们使用 testng 运行测试用例时,上一个类再次运行
- java - 如何解决这个 ClassNotFoundexception?
- xamarin.forms - Xamarin Forms 标签不会在 WPF 平台上换行
- matlab - Matlab 与 Julia 与 Fortran 中的速度
- google-apps-script - 自动与已填写 Google 表单的电子邮件共享视图
- list - 如何从列表内部访问实例方法?
- python - 如何重塑没有列的数组?
- vba - 如何知道特定的导出过滤器是否已在 Windows 中注册?
- c++ - get_input_port 方法在 drake 中的什么位置?
- java - ResultSet 关闭后不允许 SQL 异常操作,何时关闭?