html中显示男女,在HTML中显示JavaScript对象

我有一个看起来像这样的对象：

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中显示对象中的每个项目,如下所示：

Item Here

Category Here

Price Here

我知道如何在JS中循环一个Object,但我不确定如何在DOM中显示这些项目.我相信我可以使用jQuery追加功能,但我不知道如何.

任何帮助,将不胜感激.谢谢！

解决方法:

这就是你如何使用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 = $('

wrapper.append(container);

container.append('

' + key +'

');

container.append('

' + grocery_list[key].category +'

');

container.append('

' + grocery_list[key].price +'

');

}

jsfiddle在这里：

编辑：请把这个作为一个例子(这是正确的,因为你正在学习).正如其他人指出的那样 – 这不是最好的方法.尝试结合其他示例,特别是那些不将HTML组成字符串的示例.对于像这样的简单任务,它很简单,但是代码越多,代码就会变得更加混乱.我相信你的“学习进化”会让你在那里:-)为每个人欢呼

标签：javascript,dom,object

来源： https://codeday.me/bug/20190528/1172096.html