Show JavaScript object in HTML
I have an 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 every element in the object in HTML format 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 iterate over an object in JS, but I'm not sure how to display these elements in the DOM. I believe I can use jQuery's append function, but I'm not sure how.
Any help would be greatly appreciated. thank!
source to share
This is how you can do it using jQuery (as you mentioned, you would like to use jQuery first). But this is not the best way to do it. If you're open to learning better techniques, check out some of the MV * frameworks (AngularJS, Ember, etc.). Anyway, here's 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:
EDIT: Please take this as an example (this is ok since you are learning). As others have pointed out, this is not the best method. Try combining other examples, especially those that don't compose HTML as a string. For simple tasks like this, it's simple, but the extra code you would add dirtier would become. I believe that your "learning evolution" will get you there anyway :-) Greetings everyone
source to share
You can create HTML elements with jQuery: $('<div>', {attr1: value, attr2: value});
Returns a new jQuery object, so you can use it as a jQuery element.
JQuery.text () Method: $('div').text('some text')
This method is recommended if you only put text inside an element. It will avoid all special characters like '<'
. Instead, he places <
. This avoids XSS attacks unlike the jQuery.html () method. You can look at the security considerations in the jQuery docs regarding the .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);
}
source to share
The parent div <div id="grocery_item" class="container">
will be repeated for no. items in the product list. The "id" of this parent div will be randomly generated, eg item @index 0 will be "grocery_item0"
For each element in the loop, create a parent div first, then start adding data to the parent div using (another loop). Below will be a jquery sample,
$ (".grocery_item0") .append ("");
source to share
I'll pass by that your definition of a list isn't exactly the best, and I say this:
Using jQuery you can do this:
<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 is not recomanded to maanipulate the DOM when generating HTML strings. This is just a quick reference for your school assignment.
source to share