在 HTML 中显示 JavaScript 对象

Display JavaScript Object in HTML

本文关键字：JavaScript 对象 显示 HTML      更新时间：2023-09-26

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

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追加函数，但我不确定如何。

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

这就是

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

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

jQuery.text（） 方法： $('div').text('some text') 如果您只将文本放在元素中，则建议使用此方法。它将转义所有特殊字符，例如 '<' .相反，它把&lt.这避免了与jQuery.html（）方法不同的XSS攻击。您可以在 jQuery 文档中查看有关.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

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

父div <div id="grocery_item" class="container"> 将重复购物清单中的物品编号。此父div 的"id"将随机生成，例如项目 @index 0 将为"grocery_item0"

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

$（ ".grocery_item0" ）.append（ " ）;

我会

顺便说一下，你的列表定义并不是最好的，我这样说：

使用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。这只是您学校作业的快速示例。

相关文章：