Javascript - печать ключей объекта на HTML - PullRequest
Новая
       12

Javascript - печать ключей объекта на HTML

0 голосов
/ 31 января 2020

Итак, я пытаюсь распечатать каждую категорию предметов, которые мой объект магазина продает, в файл HTML в Javascript. Когда я попытался сделать это ниже, он, кажется, ничего не печатал, и мне было интересно, если кто-то может сказать мне, что я делаю неправильно.

Я хочу, чтобы это распечатало:

Мороженое

Торт 

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;
    }

}

также мой 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>

Ответы [ 2 ]

2 голосов
/ 31 января 2020

Object.keys возвращает массив. Вы можете перебрать массив для создания новой строки или просто присоединиться к ней:

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

РЕДАКТИРОВАТЬ: В вашем коде есть несколько ошибок, которые мешают это из работы:

  1. У вашей кнопки есть только один атрибут onclick: onclick="showCategories()"
  2. Значение параметра для десертов должно совпадать с вашим оператором if в showCategories. Так что либо измените условие if на userPicked === 'one', либо измените значение параметра Desserts на <option value="dessert">Desserts</option>
0 голосов
/ 31 января 2020

Вы можете добавить прослушиватель событий к опциям выпадающего меню и отфильтровать опции меню по выбранному значению. Затем нужно просто создать свои элементы и добавить их в список. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...