以HTML显示JavaScript对象

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>

我知道如何在JS中遍历对象，但是我不确定如何在DOM中显示这些项目。我相信我可以使用jQuery append函数，但不确定如何。

任何帮助，将不胜感激。谢谢！

Answer 1

这就是使用jQuery的方式（正如您提到的，您想先使用jQuery）。但这不是最好的方法。如果您愿意学习更好的方法，请检查一些MV *框架（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/

编辑：请以这个为例（由于您正在学习，所以可以）。正如其他人指出的那样-这不是最好的方法。尝试结合其他示例，尤其是那些不将HTML组成字符串的示例。对于这样的简单任务，它很简单，但是更多的代码会使代码变得更加混乱。我相信您的“学习进化”无论如何都会帮助您：-)所有人都为之欢呼