我是 JavaScript 的初学者，想要在 HTML 中显示对象数组。

数据的格式是这样的：

[
  {"key":"apple","value":1.90},
  {"key":"berry","value":1.7},
  {"key":"banana","value":1.5},
  {"key":"cherry","value":1.2}
]

我想使用包含三列（id、名称、相关性）的列表来显示它们。并且id可以从1自动增加。

谁能告诉我如何编写 javascript 代码来显示它？

请给我一些资料或例子来学习。

解释

您想要的是使用 JavaScript 填充 HTML 中的表格（或另一个 DOMElement），一旦加载页面并收到 JSON 对象，就会动态执行 JavaScript。

您想要循环遍历该对象。最好的方法是使用for循环，并确保我们的循环变量对于我们对象的长度（它的所有属性）仍然有效。

获取 JSON 对象长度的最佳方法是通过myJSONObject.length：您选择的键myJSONObject并返回他们的计数。

您可以通过以下方式访问存储在 JSON 对象中的值：for循环（假设定义的循环变量名为i): myJSONObject[i].theAttributeIWantToGet

价格格式细分

现在，这些价格需要有正确的格式，不是吗？所以我们会检查是否有任何value属性有小于2之后的字符.在他们之内。如果是的话，我们再加一个小数0。我们还添加一个$在写入格式化值之前。以下是其工作原理的详细说明：

• obj[i].value.toString().substring(startIndex, length)

  • 我们想检查之后的长度.符号，因此我们的 startIndex 将是该点在字符串中的位置。
  • obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'),length)
  • 我们现在需要设置长度。我们想要找到点之后所有内容的长度，因此为了安全起见，我们将采用整个字符串的长度。

  • 最后结果：obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2

    • 这将返回 true 或 false。如果为真：点后少于 2 位数字！

  • 我们添加if语句和最后一个零：

  • if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

Also: 我为什么使用innerHTML代替appendChild() http://jsperf.com/html-innerhtml-vs-appendchild.

Solution

JSFiddle http://jsfiddle.net/mjE7R/

HTML

<table>
    <tbody id="tbody"></tbody>
</table>

JSON

[{
    "key": "apple",
    "value": 1.90
}, {
    "key": "berry",
    "value": 1.7
}, {
    "key": "banana",
    "value": 1.5
}, {
    "key": "cherry",
    "value": 1.2
}]

JavaScript

Note:JSON 对象将被命名obj在这种情况下。

var tbody = document.getElementById('tbody');

for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";

    /* Verification to add the last decimal 0 */
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) 
        obj[i].value += "0";

    /* Must not forget the $ sign */
    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";

    /* We add the table row to the table body */
    tbody.innerHTML += tr;
}

JSFiddle http://jsfiddle.net/mjE7R/