How to filter a nested array and render it with js.
GitHub: https://github.com/Saf98/mega-menu-vanilla/blob/main/src%2Fnav.js
Project details: build a vertical column mega menu using JS.
What I have done so far:
Loop through the first set of objects in the array to render the parent categories and render it out 1st column.
To render the child categories (in the 2nd column) I check the value of he parent link using onClick event value and render it out.
Same for the 3rd column but logic is pretty much repeated.
Problem:
How do I update the 3rd col child elements if their parents change? (Only changes if the main parent element changes)
Also I would like some feedback on my logic and how to simplify it.
GitHub
mega-menu-vanilla/src/nav.js at main · Saf98/mega-menu-vanilla
Created with CodeSandbox. Contribute to Saf98/mega-menu-vanilla development by creating an account on GitHub.
7 Replies
I guess I could just replacechildren of child elements on the grandparent element?
Can you put this in a codepen please @big saf 🍉 ?
I will try, there is the code sandbox but It won't run unless you delete the parcel cache folder @vince
@vince I've actually created this before for work but it was a massive spaghetti code so I am recreating it to simplify and learn new things
This is a lot more involved than I thought hehe, I probably won't have time to get around to it or build a better solution than you did but if I do I'll lyk 🙂
I just needed to replace the subChildElement