I have a js file containing 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 want to recreate the below structure dynamically:
<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 want to do this with only JavaScript. I tried appending and creating new elements but I have to do it for each object. I think I am to create a function that loops through all the objects and creates new elements to populate but I am not sure. How do I go about it?
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.0,
},
1: {
name: "Appetizer2",
description: "It's another appetizer",
price: 7.5,
},
},
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,
},
},
},
};
const itemsElement = document.querySelector(".menu__items");
for (const [category, items] of Object.entries(restaurant_A.menu)) {
const categoryElement = document.createElement("div");
categoryElement.id = category.toLowerCase();
const headingElement = document.createElement("h2");
headingElement.textContent = category;
categoryElement.appendChild(headingElement);
for (const [index, item] of Object.entries(Object.values(items))) {
const itemElement = document.createElement("div");
itemElement.id = `${categoryElement.id.replace(/s$/, "")}${parseInt(index) + 1}`;
const headingElement = document.createElement("h3");
headingElement.textContent = item.name;
itemElement.appendChild(headingElement);
const descriptionElement = document.createElement("p");
descriptionElement.textContent = item.description;
itemElement.appendChild(descriptionElement);
const priceElement = document.createElement("p");
priceElement.textContent = `$${item.price.toFixed(2)}`;
itemElement.appendChild(priceElement);
categoryElement.appendChild(itemElement);
}
itemsElement.appendChild(categoryElement);
}<div class="menu__items"></div>