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

Question

所以我正在尝试使用 HTML 和 Javascript 创建一个在线商店作为练习。 我目前正在使用一个下拉菜单，它允许我选择我想购买的商品类别（例如电子产品、衣服），但我无法显示与该类别相关的所有这些值。

例如，我在下面有一个 javascript 文件的一部分。 div.innerHTML = (electronics.store)让我将电子商店名称"Mike's Computers"打印到浏览器上的 HTML 文件中，但我不太确定如何访问其库存下的所有对象。 有没有办法遍历整个电子产品库存并打印出每个项目及其下方的成本/信息等？

如果没有，我将如何打印诸如笔记本电脑品牌名称之类的东西？ 是否只是div.innerHTML = (electronics.inventory[0].brand)打印出"iMac"?这个词"iMac"? 我很困惑，希望得到任何可能的帮助。

最终，我希望我的信息显示在 HTML 页面上，例如：

迈克的电脑

笔记本电脑

iMac 2000 美元

戴尔 600 美元

电脑

视窗电脑 $1300

等等。

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

这是添加数据的示例代码。

 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

第一步，尽可能多地使用 JavaScript 进行演示。 使用 HTML 创建结构。 然后使用 JavaScript 填充该结构。 这样，如果您想更改布局，您将更改 HTML 和 CSS 而不是 Javascript。 使用<template>标签创建重复项的结构。

第二步，迭代属性，克隆我们的模板，然后添加到 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>

复制模板的代码修改自： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Answer 3

您可以像这样使用 for 循环遍历电子商店库存

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

然后在 for 循环的主体中，您可以调用键和值并将其附加到 innerHTML，就像您在上面所做的那样。