如何在JavaScript中迭代JSON对象并使用它创建表

How to iterate over JSON object in JavaScript and create table with it?

本文关键字：创建 对象 JSON JavaScript 迭代      更新时间：2023-09-26

我有一个JSON与这个结构:

diferencias = {
    "1": {
      "1": 543.0, 
      "0": 542.0
    }, 
    "2": {
      "0 1": 0.3333333333333333
    }
}

我需要获得一个表与外部键作为列。

我写了以下代码:

$("#pinchetabla").empty()
    var tr = ""
    for (d in diferencias) {
        var r = ''
        for (dd in d) {
            //console.log(dd)
            r += '<tr>' + 'f[' + diferencias.dd + ']=' + diferencias.d.dd + '</tr>'
        }
        tr += r
    }
    var table = "<table id='resultados' class='table table-condensed'>" + tr + "</table>"
$("#pinchetabla").append(table)

我有以下jsfiddle

其中pinchetabla为div。然而，我甚至不能正确访问JSON键和值。我错过了什么?

当您使用点表示法访问属性时，例如object.propertyname, JavaScript将在object中查找propertyname。在您的例子中，d和dd仅仅是object中的键，但是JavaScript将在diferencias中查找它们，并且无法找到它们。

为了动态访问属性，必须使用下标/括号符号，如

r += '<tr>' + 'f[' + d + ']=' + diferencias[d][dd] + '</tr>';

for循环也应该像这样

for (dd in diferencias[d]) {

你的表创建代码可以像这样修改

var tr = "";
for (d in diferencias) {
    var r = '<tr>';
    for (dd in diferencias[d]) {
        r += '<td>' + 'f[' + d + ']=' + diferencias[d][dd] + '</td>';
    }
    tr += r + '</tr>';
}

有几个问题。

  1. 当你在javascript中迭代字典时，它会返回键。所以你的内部迭代循环应该是for(dd in diferencias[d])
  2. 你也需要<td>标签。
  3. 你需要实例化var tr在你使用它之前(tr += r)
http://jsfiddle.net/fQ9Py/1/

相关文章：