Display JavaScript Object in HTML

Question

I have a object that looks like this:

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

And I want to be able to display each item in the object in HTML like this:

<div id="grocery_item" class="container">
    <div class="item">Item Here</div>
    <div class="category">Category Here</div>
    <div class="price">Price Here</div>
</div>

I know how to loop through an Object in JS, but I'm not sure how to display those items in the DOM. I believe I could use the jQuery append function but I'm not sure how.

Any help would be appreciated. thanks!

Answer 1

This is how you can do it using jQuery (as you mention you'd like to use jQuery first). But it's not the best way how to it. If you're open to learn better methods then check some of the MV* frameworks (AngularJS, Ember etc.). Anyway, here is just an example:

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

var wrapper = $('#wrapper'), container;
for (var key in grocery_list){
    container = $('<div id="grocery_item" class="container"></div>');
    wrapper.append(container);
    container.append('<div class="item">' + key +'</div>');
    container.append('<div class="category">' + grocery_list[key].category +'</div>');
    container.append('<div class="price">' + grocery_list[key].price +'</div>');
}

jsfiddle here: http://jsfiddle.net/5jhgbg9w/

EDIT: Please, take this really as an example (which is OK since you're learning). As others pointed out - it's not the best method. Try to combine other examples, particularly the ones which do not compose HTML as a string. For easy tasks like this it's straightforward but the more code you would add, the messier the code becomes. I believe your "learning evolution" would get you there anyway :-) Cheers everyone

EDIT (2021): A lot of years have gone by since I answered this question. What about some more modern examples, just for fun? Without jQuery, just ES6:

const grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
};

// since "grocery_list" is an object (not an array) we have do Object.keys()
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('container').innerHTML = generatedHtml;

.grocery_item{
  padding: 5px;
}
.grocery_item:not(:last-child){
  border-bottom: 1px solid #ccc;
}

<div id="container"></div>

Answer 2

You can create HTML elements with jQuery: $('<div>', {attr1: value, attr2: value}); This returns a new jQuery object so you can use it like jQuery element.

The jQuery.text() method: $('div').text('some text') This method is recommended if you putting just text inside the element. It will escape all special characters like '<'. Instead it puts &lt. This avoiding XSS attacks unlike jQuery.html() method. You can look Security Considerations at jQuery docs about .html method.

// Create a div element with jQuery which will hold all items.
var $tree = $('<div>', {id: 'items-tree'});
//Loop all items and create elements for each
for (var key in grocery_list) {
  var $gItem = $('<div>', {
    id: 'grocery_item',
    class: 'container'
  });

  var $item = $('<div>', {
    class: 'item'
  }).text(key);
  $gItem.append($item);

  var $category = $('<div>', {
    class: 'category'
  }).text(grocery_list[key].category);
  $gItem.append($category);

  var $price = $('<div>', {
    class: 'price'
  }).text(grocery_list[key].price);
  $gItem.append($price);

  $tree.append($gItem);
}

JSFiddle