javascript - 从 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、name、relevance)的列表来显示它们。并且 id 可以从 1 自动增加。

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

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

Answer 1

解释

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

您想遍历对象。最好的方法是使用 for循环，并确保我们的循环变量在我们的对象(其所有属性)的长度内保持有效。

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

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

---

还有: Why I use innerHTML instead of 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