Javascript - printing out variables & objects to 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
            }
        }
    }
};

Ideally you would have an array of objects as the values for the `Laptops` and `Computers` properties. You can then iterate them as you would any other array. You can iterate properties: https://stackoverflow.com/questions/8312459/iterate-through-object-properties — Jon P, Jan 29 '20 at 03:07

score 1 · Answer 1 · answered Jan 29 '20 at 04:59

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>

score 1 · Accepted Answer · answered Jan 30 '20 at 01:27

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

nebekerdev · Answer 3 · 2020-01-29T19:41:23.770

0

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.

edited Jan 29 '20 at 19:41

answered Jan 29 '20 at 03:35

nebekerdev

142
9

Javascript - printing out variables & objects to HTML

3 Answers3