Skip to main content

Display JavaScript Object in HTML - JS

Display each item in the object in HTML.

DEMO

JS

const grocery_list = {
  "Durian": { category: "fruit", price: 5.99 },
  "Rambutan": { category: "fruit", price: 2.99 },
  "Vanilla": { category: "candy", price: 2.75 }
};

const generatedHtml = Object.keys(grocery_list).reduce((accum, currKey) => accum +
  `<div class="grocery_item">
    <div class="item">${currKey}</div>
    <div class="category">${grocery_list[currKey].category}</div>
    <div class="price">${grocery_list[currKey].price}</div>
  </div>`, '');

document.getElementById('list-name').innerHTML = generatedHtml;

Comments