Показать JavaScript Object в HTML

Question

У меня есть объект, который выглядит следующим образом:

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

И я хочу, чтобы иметь возможность отображать каждый элемент в объекте в HTML так:

<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 знаете, как перебирать объект в JS, но я не уверен, как отображать эти элементы в DOM. Я считаю, что могу использовать функцию jQuery append, но я не уверен, как это сделать.

Любая помощь будет оценена по достоинству. благодаря!

Answer 1

Как вы можете это сделать, используя jQuery (как вы упомянули, вы хотели бы сначала использовать jQuery). Но это не лучший способ. Если вы открыты для изучения лучших методов, проверьте некоторые из MV * framework (AngularJS, Ember и т. Д.). Во всяком случае, здесь это просто пример:

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 здесь:

http://jsfiddle.net/5jhgbg9w/

EDIT: Пожалуйста, возьмите это на самом деле в качестве примера (который является ОК, так как вы учитесь). Как указывали другие, это не самый лучший метод. Попробуйте объединить другие примеры, особенно те, которые не составляют HTML как строку. Для простых задач, подобных этому, это простой, но дополнительный код, который вы добавили бы более беспорядочный код. Я верю, что ваша «эволюция обучения» все равно вас доставит :-) Приветствие всем

Answer 2

Родительский div <div id="grocery_item" class="container"> будет повторен для no. предметов в списке продуктов. «id» этого родительского div будет генерироваться случайным образом, например item @index 0 будет «grocery_item0»

Для каждого элемента цикла создайте сначала родительский div, а затем начните добавлять данные к использованию родительского div (другое петля). Ниже будет образец jquery,

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

Answer 3

я передам тем, что ваше определение списка является не лучший, и я говорю об этом:

Использование JQuery вы могли бы сделать это:

<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> 

Примечание *: Это не Рекомендуемые нами в maanipulate DOM, создав строки HTML. Это просто быстрый образец для вашего школьного задания.

Answer 4

Вы можете создавать элементы HTML с помощью jQuery: $('<div>', {attr1: value, attr2: value}); Это возвращает новый объект jQuery, поэтому вы можете использовать его как элемент jQuery.

Метод jQuery.text(): $('div').text('some text') Этот метод рекомендуется, если вы помещаете только текст внутри элемента. Он избежит всех специальных символов, таких как '<'. Вместо этого он помещает &lt. Это позволяет избежать атак XSS в отличие от метода jQuery.html(). Вы можете посмотреть соображения безопасности на jQuery docs о методе .html.

// 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