Javascript - 将变量和对象打印到 HTML

Question

So I'm trying to create an online shop using HTML and Javascript as an exercise. I'm currently working on a dropdown menu which allows me to select the category of the item I wish to shop for (etc. electronics, clothes) but I'm having trouble getting all these values related to the category to show up.

So for example, I have a part of a javascript file below. The line div.innerHTML = (electronics.store) lets me print out the electronics store name "Mike's Computers" to the HTML file on my browser but I'm not quite sure how to access all the objects under its inventory. Is there a way to possibly iterate through the whole electronics inventory and print out each of the items and its cost/information below it and such?

If not, how would I go about printing things like the laptop brand name? Would it just be div.innerHTML = (electronics.inventory[0].brand) to print out the word "iMac"? I'm very confused and would appreciate any help possible.

Ultimately, I'd want my information to show up on the HTML page like:

Mike's Computers

Laptops

iMac $2000

Dell $600

Computers

Windows PC $1300

and so on.

function showOptions(){
    let userPicked = document.getElementById("list").value;
    var div = document.getElementById("div");
    if(userPicked == 'one'){
        div.innerHTML = (electronics.store);
    }else{
        alert("You must select a store.");
    }
}

let electronics = {
    store: "Mike's Computers",
    inventory: {
        "Laptops": {
            0: {
                brand: "iMac",
                cost: 2000
            },
            1: { 
                brand: "Dell",
                cost: 600
            }
        },
        "Computers": {
            2: {
                brand: "Windows PC",
                cost: 1300
            }
        }
    }
};

Answer 1

Here is sample code to add the data.

 let electronics = { store: "Mike's Computers", inventory: { "Laptops": { 0: { brand: "iMac", cost: 2000 }, 1: { brand: "Dell", cost: 600 } }, "Computers": { 2: { brand: "Windows PC", cost: 1300 } } } }; function showOptions(){ let userPicked = document.getElementById("list").value; var div = document.getElementById("div"); if(userPicked == 'one'){ var newContent = (electronics.store); newContent += '<br>'; Object.keys(electronics.inventory).forEach(key => { newContent += '<br>'; newContent += key; newContent += '<br>'; var items = Object.values(electronics.inventory[key]); items.forEach(item => { newContent += `&nbsp; ${item.brand} $${item.cost}`; newContent += '<br>'; }); }); div.innerHTML = newContent; }else{ alert("You must select a store."); } } showOptions();

 <input type="text" id="list" value="one"> <div id="div"> </div>

Answer 2

Step one, take as much presentation out of your JavaScript as possible. Create the structure using HTML. Then populate that structure using JavaScript. That way if you want to change the layout, you're changing HTML and CSS and NOT Javascript. Use the <template> tag to create the structure of the repeating items.

Step Two, iterate the properties, cloning our template, then add to the DOM.

 //Get the template var template = document.getElementById("inventoryItem"); function showOptions() { /*let userPicked = document.getElementById("list").value; var div = document.getElementById("div"); if(userPicked == 'one'){ div.innerHTML = (electronics.store); }else{ alert("You must select a store."); }*/ document.querySelector("#store .storeName").innerHTML = electronics.store; generateInventory(document.querySelector("#store .laptops > ul"), electronics.inventory.Laptops); generateInventory(document.querySelector("#store .computers >ul"), electronics.inventory.Computers); } function generateInventory(node, object) { //Iterate the properties for (var itemName in object) { if (Object.prototype.hasOwnProperty.call(object, itemName)) { let item = object[itemName]; //Clone the template let clone = template.content.cloneNode(true); //Populate the content clone.querySelector(".brand").textContent = item.brand; clone.querySelector(".cost").textContent = clone.querySelector(".cost").textContent + item.cost; //Append to the DOM node.appendChild(clone); } } } let electronics = { store: "Mike's Computers", inventory: { "Laptops": { 0: { brand: "iMac", cost: 2000 }, 1: { brand: "Dell", cost: 600 } }, "Computers": { 2: { brand: "Windows PC", cost: 1300 } } } }; showOptions();

 #store ul { list-style: none; padding-left: 0; } #store ul ul { padding-left: 1em; }

 <div id="store"> <h1 class="storeName"></h1> <ul class="inventory"> <li class="laptops"> <h2>Laptops</h2> <ul></ul> </li> <li class="computers"> <h2>Computers</h2> <ul></ul> </li> </ul> </div> <template id="inventoryItem"> <li> <div class="brand"></div> <div class="cost">$</div> </li> </template>

The code for duplicating the template is modified from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Answer 3

You can iterate through the electronics store inventory with a for loop like so

for (let [key, value] of Object.entries(electronics))

Then in the body of the for loop, you can call the key and value and append it to the innerHTML like you are already doing above.