Javascript - 将对象键打印为 HTML

Question

So I'm trying to print out each category of items that my store object sells to an HTML file in Javascript.因此，我试图将我的商店对象出售的每个类别的商品都打印到 Javascript 中的 HTML 文件中。 When I attempted to do so below, it doesn't seem to print anything and I was wondering if someone could tell me what I'm doing wrong.当我在下面尝试这样做时，它似乎没有打印任何内容，我想知道是否有人可以告诉我我做错了什么。

I want it to print out:我希望它打印出来：

Ice cream冰淇淋

Cake蛋糕

let dessert = {
    store: "Baskin Robbins",
    inventory: {
        "Ice cream": {
            0: {
                flavor: "Chocolate",
                cost: 15
            },
            1: { 
                flavor: "Vanilla",
                cost: 10
            }
        },
        "Cake": {
            2: {
                flavor: "Oreo",
                cost: 30
            }
        }
    }
};



function showCategories(){
    let userPicked = document.getElementById("list").value;
    var div = document.getElementById("div");   
    if(userPicked == 'dessert'){
        var categories = "Inventory";
        categories += "<br>";
        var options = Object.keys(dessert.inventory);
        categories += options;
        div.innerHTML = categories;
    }

}

also my html file:还有我的 html 文件：

<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target">
            <option value="none">Pick store</option>
            <option value="one">Desserts</option> 
        </select>
        <input type=button value="Select" onclick="showOptions()" onclick = "showCategories()"/>
        </form>
        </div>
    </div>
    <div id="div"></div>
        <script src="store.js"></script>
    </body>
</html>

Answer 1

Object.keys returns an array. Object.keys返回一个数组。 You can iterate the array to build a new string, or simply join it:您可以迭代数组以构建一个新字符串，或者简单地加入它：

categories += options.join('<br>')

EDIT: There are a few errors in your code that are preventing this from working:编辑：您的代码中有一些错误阻止了它的工作：

Only have one onclick attribute on your button: onclick="showCategories()"按钮上只有一个 onclick 属性： onclick="showCategories()"
The option value for Desserts needs to match your if statement in showCategories. Desserts 的选项值需要与 showCategories 中的 if 语句相匹配。 So either change the if condition to userPicked === 'one' , or change the Desserts option value to <option value="dessert">Desserts</option>因此，要么将 if 条件更改为userPicked === 'one' ，要么将 Desserts 选项值更改为<option value="dessert">Desserts</option>

Answer 2

You can add an event listener to your dropdown options and filter your menu options with the selected value.您可以将事件侦听器添加到下拉选项中，并使用所选值过滤菜单选项。 Then, it's just a matter of building up your elements and appending them to the list.然后，只需构建元素并将它们附加到列表中即可。

 const dessert = { store: "Baskin Robbins", inventory: { "Ice cream": { 0: { flavor: "Chocolate", cost: 15 }, 1: { flavor: "Vanilla", cost: 10 } }, "Cake": { 2: { flavor: "Oreo", cost: 30 } } } }; const ddl = document.getElementById('ddl'); ddl.addEventListener('change', e => { const itemsList = document.getElementById('items'); itemsList.innerHTML = ''; const options = dessert.inventory[e.target.value]; for (const key in options) { const flavor = options[key].flavor; const div = document.createElement('div'); div.innerText = flavor; itemsList.append(div); } });

 <select id="ddl"> <option>Select...</option> <option value="Ice cream">Ice Cream</option> <option value="Cake">Cake</option> </select> <div id="items"></div>

Javascript - 将对象键打印为 HTML

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-01-31 00:31:34

解决方案2
0 2020-01-31 00:35:46

Javascript - 将对象键打印为 HTML

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-01-31 00:31:34

解决方案2 0 2020-01-31 00:35:46

解决方案1
2 已采纳 2020-01-31 00:31:34

解决方案2
0 2020-01-31 00:35:46