Javascript - вывод переменных и объектов на HTML - PullRequest
Новая
       6

Javascript - вывод переменных и объектов на HTML

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

Итак, я пытаюсь создать интернет-магазин, используя HTML и Javascript в качестве упражнения. В настоящее время я работаю над выпадающим меню, которое позволяет мне выбрать категорию предмета, для которого я буду покупать sh (например, электроника, одежда), но у меня возникают проблемы с получением всех этих значений, связанных с категория для отображения.

Так, например, у меня есть часть файла javascript ниже. Строка div.innerHTML = (electronics.store) позволяет мне распечатать название магазина электроники "Mike's Computers" в файл HTML в моем браузере, но я не совсем уверен, как получить доступ ко всем объектам в его инвентаре. Есть ли способ, возможно, перебрать весь инвентарь электроники и распечатать каждый элемент и его стоимость / информацию под ним и тому подобное?

Если нет, то как бы я go напечатал такие вещи, как ноутбук название бренда? Было бы просто div.innerHTML = (electronics.inventory[0].brand) распечатать слово "iMac"? Я очень запутался и был бы признателен за любую возможную помощь.

В конечном счете, я хотел бы, чтобы моя информация отображалась на странице HTML как:

Компьютеры Майка

Ноутбуки

iMa c $ 2000

Dell $ 600

Компьютеры

Windows P C $ 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
            }
        }
    }
};

Ответы [ 3 ]

1 голос
/ 29 января 2020

Вот пример кода для добавления данных. 

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>
1 голос
/ 30 января 2020

Шаг первый, возьмите как можно больше презентаций из вашего 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

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

Вы можете перебирать инвентарь магазина электроники с помощью для l oop примерно так 

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

Затем в теле для l oop вы можете вызывать ключ и значение и добавлять это к внутренней HTML, как вы уже делаете выше.

...