在 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 追加功能，但我不确定如何。

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

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 组合为字符串的示例。对于像这样的简单任务，它很简单，但是您添加的代码越多，代码就会变得越混乱。我相信你的“学习进化”无论如何都会让你到达那里:-)大家干杯

编辑（2021 年）：自从我回答这个问题以来已经过去了很多年。一些更现代的例子呢，只是为了好玩？没有 jQuery，只有 ES6：

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

// since "grocery_list" is an object (not an array) we have do Object.keys()
const generatedHtml = Object.keys(grocery_list).reduce((accum, currKey) => accum +
  `<div class="grocery_item">
    <div class="item">${currKey}</div>
    <div class="category">${grocery_list[currKey].category}</div>
    <div class="price">${grocery_list[currKey].price}</div>
  </div>`, '');

document.getElementById('container').innerHTML = generatedHtml;

.grocery_item{
  padding: 5px;
}
.grocery_item:not(:last-child){
  border-bottom: 1px solid #ccc;
}

<div id="container"></div>

Answer 2

您可以使用 jQuery 创建 HTML 元素：$('<div>', {attr1: value, attr2: value}); 这将返回一个新的 jQuery 对象，因此您可以像使用 jQuery 元素一样使用它。

jQuery.text() 方法：$('div').text('some text') 如果您只在元素中放置文本，建议使用此方法。它将转义所有特殊字符，如'<'。取而代之的是&lt。这避免了与 jQuery.html() 方法不同的 XSS 攻击。 您可以在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

Answer 3

父 div <div id="grocery_item" class="container"> 将重复编号。杂货清单中的项目。 此父 div 的“id”将随机生成，例如 item @index 0 将是“grocery_item0”

对于每个循环项目，首先创建父 div，然后开始将详细信息附加到父 div 的 using（另一个循环）。 下面将是示例 jquery，

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

Answer 4

我会忽略你的列表定义并不是最好的事实，我这样说：

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

注意*：不建议通过创建 HTML 字符串来操作 DOM。这只是您的学校作业的快速示例。

Answer 5

它很旧，但你可以试试包html-stringify。正如它的介绍：“将 Javascript 对象或数组转换为漂亮的 HTML 字符串，以便在浏览器中呈现。”