从JavaScript对象创建HTML表

Question

我是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代码来显示它？

请给我一些材料或示例进行学习。

Answer 1

说明

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

您要遍历对象。最好的方法是使用for循环，并确保 循环变量 在对象（所有属性）的长度内保持有效。

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

您可以通过以下方式在for循环中访问存储在JSON对象中的值（假设html" target="_blank">定义的循环变量名为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";

另外： 为什么我使用innerHTML而不是appendChild()。

JSFiddle

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

注意： 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