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 can help you ?

Elikill58
– Elikill58

2021-10-02 21:12:06 +00:00
Commented Oct 2, 2021 at 21:12 — Elikill58
– Elikill58, Commented Oct 2, 2021 at 21:12
@Elikill58 Thanks. This helps to solve a different problem.

Isuckatprogrammingatm
– Isuckatprogrammingatm

2021-10-03 16:17:33 +00:00
Commented Oct 3, 2021 at 16:17 — Isuckatprogrammingatm
– Isuckatprogrammingatm, Commented Oct 3, 2021 at 16:17

Nicky McCurdy · Accepted Answer · 2021-10-02 22:19:12Z

2

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>

edited Oct 2, 2021 at 22:19

answered Oct 2, 2021 at 22:01

Nicky McCurdy

19.8k5 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Isuckatprogrammingatm Over a year ago

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]

Nicky McCurdy Over a year ago

`${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.

Collectives™ on Stack Overflow

Dynamically populating HTML with JavaScript objects

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related