Not able to display all the data across navigation dropdown on hover correctly

Question

Hello I am new to NodeJs. I was making a website dynamic with the use of EJS and Node. I was trying to make a navigation dropdown which has three levels inside it like below.:-

Now I am trying to mimic this and this is what I am getting :-

The below is the code which I have tried in the js file:-

 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 is the first level, Category is the second level and the products is the third level. Not all Main categories have categories in them.

The data displayed by console.log(categories) is as follows:-

[ { 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 } ]

The below is the ejs file:-

<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>

How do I display the categories for each Main Category and the product for each category. Please help me out. I am stuck on this for a long time now.

Answer 1

In your code, you have a loop:

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

Here, you are assigning a value to app.locals.categoriesHeader that is being overwritten each pass through the loop. So, only the last category (machined-parts) is being displayed in your menu.

You may try changing the line app.locals.categoriesHeader= categories to be mainCategories.subCategories= categories. Then in your template, instead of:

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

You could use:

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

Answer 2

The for Each loop gives the last value. Remove this from the code:-

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) {
              app.locals.categoriesHeader= categories;
             } 
            }
          })
        })

Loop through categories just like you did with mainCategory inside the else loop..

Category.find({},function(err,categories){
  app.locals.categoriesHeader= categories;
}

Then put the conditions to match the category.maincategory with maincategory in the ejs file below your ul tag. No need to try and match it with the help of for loop inside the js file.