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\", pric         


        

Answer 1

The parent div <div id="grocery_item" class="container"> will be repeated for the no. of items in the grocery list. The "id" of this parent div will be generated randomly for example item @index 0 will be "grocery_item0"

For each loop item create the parent div's first, then start appending the details to the parent div's using (another loop). Below will be sample jquery,

$( ".grocery_item0" ).append( "" );

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

Answer 3

I will pass by the fact that your list definition is not exactly the best and I say this:

Using jQuery you could do that:

<script>
var _parent = $(".container").parent();
_parent.empty();

var _html;
$.each(grocery_list,function(prop, val){
    _html = "<div id=\"grocery_item\" class=\"container\">";
    _html += "<div class=\"item\">"+prop+"</div>";
    _html += "<div class=\"category\">"+val.category+"</div>";
    _html += "<div class=\"price\">"+val.price+"</div>";
    _html += "</div>";

    _parent.append(_html);
});
</script>

Note*: It's not recomanded to maanipulate the DOM by creating HTML strings. This is just an fast sample for your school assignment.

Answer 4

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 string. For easy tasks like this it's straightforward but more code you would add more messy the code becomes. I believe your "learning evolution" would get you there anyway :-) Cheers everyone