I have a JavaScript file that holds data in the form of objects :
let restaurant_A = {
name: "BBQ place",
min_order: 20,
delivery_charge: 5,
menu: {
//First category
"Appetizers": {
//First item of this category
0: {
name: "Appetizer1",
description: "It's an appetizer",
price: 4.00
},
1: {
name: "Appetizer2",
description: "It's another appetizer",
price: 7.50
}
},
"Combos": {
2: {
name: "Combo 1",
description: "It's a combo",
price: 13.33
},
3: {
name: "Combo 2",
description: "another combo",
price: 13.33
}
},
"Drinks": {
4: {
name: "Juice 1",
description: "It's a juice",
price: 5.99
},
5: {
name: "Juice 2",
description: "It's a juice",
price: 5.99
}
}
}
};
I would like to dynamically recreate the structure below:
<div class="menu__items">
<div id="appetizers">
<h2>Appetizers</h2>
<div id="appetizer1">
<h3>Appetizer1</h3>
<p>It's an appetizer</p>
<p>$4.00</p>
</div>
<div id="appetizer1">
<h3>Appetizer2</h3>
<p>It's another appetizer</p>
<p>$7.50</p>
</div>
</div>
<div id="combos">
<h2>Combos</h2>
<div id="combo1">
<h3>combo1</h3>
<p>It's a combo</p>
<p>$13.33</p>
</div>
<div id="combo2">
<h3>combo2</h3>
<p>another combo</p>
<p>$13.33</p>
</div>
</div>
</div>
I am looking to achieve this using only JavaScript. I have attempted to append and create new elements, but I find myself having to repeat the process for each object. I believe creating a function that iterates through all the objects and generates new elements is the way to go, but I am unsure. How should I approach this?