通过 Vanilla JS / JQuery 根据元素嵌套处理对象数组

Question

I have an array of objects that I have to process and then include data from it to HTML. The problem is that now everything is displayed one by one and if I try to toggle class to li element, it toggles to all li elements. The data can be changed dynamically so I cannot access elements by ID.

I want to access the "main" category first (desserts, water, tea), then be able to proceed to subcategory of the selected main category etc. Further I will create a menu like in the screenshot (a one menu, a pic shows different states of it)

I have 2 problems now:

1. For some reason the main category isn't showing at all - why is it happening?
2. How can I access the elements according to hierarchy and nesting?

 const menu = [ { id: 1, name: "Desserts", groups: [ { id: 2, name: "Cold", groups: [ { id: 3, name: "Ice Cream", groups: [] }, { id: 4, name: "Cold brew coffee", groups: [] } ] }, { id: 5, name: "Hot", groups: [ { id: 6, name: "Pancakes", groups: [] }, { id: 7, name: "Apple pie", groups: [] } ] } ] }, { id: 8, name: "Water", groups: [] }, { id: 7, name: "Tea", groups: [ { id: 8, name: "Green tea", groups: [ { id: 9, name: "With Jasmine", groups: [] }, { id: 10, name: "Plain", groups: [] } ] }, { id: 11, name: "Black Tea", groups: [] } ] } ]; let menuEl = document.querySelector(".funding__categories"); addElements(menuEl, menu[0].groups); function addElements(parent, arr) { let allCategories = parent.appendChild(document.createElement("ul")); allCategories.classList.add("parent"); arr.forEach((el) => { let subCategory = allCategories.appendChild(document.createElement("li")); subCategory.dataset.id = el.id; subCategory.textContent = el.name; if (el.groups.length > 0) addElements(subCategory, el.groups); }); }

 <div class="funding__categories"></div>

Answer 1

The first problem is because you're passing menu[0].groups to the function. That skips over the top-level categories and starts at the items nested under Desserts . Pass menu as the argument.

I don't understand the second question. Access them in what way?

 const menu = [ { id: 1, name: "Desserts", groups: [ { id: 2, name: "Cold", groups: [ { id: 3, name: "Ice Cream", groups: [] }, { id: 4, name: "Cold brew coffee", groups: [] } ] }, { id: 5, name: "Hot", groups: [ { id: 6, name: "Pancakes", groups: [] }, { id: 7, name: "Apple pie", groups: [] } ] } ] }, { id: 8, name: "Water", groups: [] }, { id: 7, name: "Tea", groups: [ { id: 8, name: "Green tea", groups: [ { id: 9, name: "With Jasmine", groups: [] }, { id: 10, name: "Plain", groups: [] } ] }, { id: 11, name: "Black Tea", groups: [] } ] } ]; let menuEl = document.querySelector(".funding__categories"); addElements(menuEl, menu); function addElements(parent, arr) { let allCategories = parent.appendChild(document.createElement("ul")); allCategories.classList.add("parent"); arr.forEach((el) => { let subCategory = allCategories.appendChild(document.createElement("li")); subCategory.dataset.id = el.id; subCategory.textContent = el.name; if (el.groups.length > 0) addElements(subCategory, el.groups); }); }

 <div class="funding__categories"></div>