Dynamically populating HTML with JavaScript objects

Question

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?

Does [this](https://stackoverflow.com/questions/157260/whats-the-best-way-to-loop-through-a-set-of-elements-in-javascript) can help you ? — Elikill58, Oct 02 '21 at 21:12

Nick McCurdy · Accepted Answer · 2021-10-02T22:19:12.717

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>

Thanks a lot. I have two questions though; What does the following line of code do ```itemElement.id = `${categoryElement.id.replace(/s$/, "")}${parseInt(index) + 1}`;``` and would I need to add any new line of code if `const restaurants = [restaurant_A, restaurant_C, restaurant_C]` — Isuckatprogrammingatm, Oct 03 '21 at 14:48
`\`${value}\`` converts a value to a string and places it within the string template. If you want to do this for multiple restaurants, you can add another `for` loop. — Nick McCurdy, Oct 04 '21 at 06:34

Dynamically populating HTML with JavaScript objects

1 Answers1