I have an array of objects. I have to somehow process this data and create an HTML document. I have no problems with HTML and CSS, but don’t know where to start with JS and how to process the data. I don’t even understand how to describe my problem correctly in order to Google some similar solutions. Can anyone help me to make a plan what exactly I should do?
I’ve made a picture describing the logic. When users click the button, they’ll see a menu (in a block looks like a dropdown menu), then they can go through category and select the item they want to choose. Please note that there’s only one block, in the pic I’m just showing the logic. After that, below the user can see the list of items they selected
const menu = [{
categories: [{
id: 1,
name: 'Desserts',
categories: [{
id: 2,
name: 'Ice cream',
categories: [{
id: 3,
name: 'Vanilla',
categories: []
}, {
id: 4,
name: 'Strawberry',
categories: []
}]
}, {
id: 5,
name: 'Baked apples',
categories: []
}]
}, {
id: 6,
name: 'Coffee',
categories: []
}, {
id: 7,
name: 'Tea',
categories: [{
id: 8,
name: 'Green tea',
categories: [{
id: 9,
name: 'With Jasmine',
categories: []
}, {
id: 10,
name: 'Simple',
categories: []
}]
}, {
id: 11,
name: 'Black Tea',
categories: []
}]
}]
}]
3
Answers
Below I show you the one of sample logic. You can add more looping and styles as per the level of categories and requirements you have;
In this approach, I first flatten your object structure assigning each item a reference to its parent’s ID.
The array structured this way easily allows you to
filter
"subitems".first step : change jo object to HTML UL / LI
recursive method=
second step: make some CSS choices for presentations…