从JSON数据创建html表格

我有一个html文件，它有这个片段。从JSON数据创建html表格

<div> 
    <table id="apps"></table> 
</div>

我收到了，看起来像这样JSON数据：

{ 
    "1": [ 
     { 
      "A": "", 
      "B": "", 
      "C": "", 
      "D": "", 
      "E": "" 
     } 
    ] 
}

将有整整一个"1"，但可以在那里的"1"列表中一个以上的字典。在此示例中，我们在列表中只有一个{}，即[]，但可能存在多个包含如上所示的五个项目的多个{}。

我想从这个数据中创建一个表格，其中每行表示[]中的一个单独的{}，并且分别具有代表A，B，C，D，E的五列。

我不确定是否应该有这个结构，标签已经在我的HTML（这不是在我的HTML代码提供），然后填充这些标签或应该我的函数加载这个数据在我的HTML文件，访问表ID =“应用程序”，并创建这些标签，然后填充这些标签？哪个更好？以及如何有效地完成这项工作？

来源

2016-11-03 Teodorico Levoff

如果这不是一个家庭作业，我会强烈建议jQuery的数据表，因为它确实将JSON数据到一个表的出色。 – Doug

试试这个简单的工作示例。我希望它能按你的期望工作。

var dataObj = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     }, 
 
     { 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     } 
 
    ]}; 
 

 
var dictionaryData = dataObj["1"]; 
 

 
for (var i in dictionaryData) { 
 
    var table = document.getElementById("apps"); 
 
    var tr = document.createElement("tr"); 
 
    var td = document.createElement("td"); 
 
    
 
    for (var key in dictionaryData[i]) { 
 
    var txt = document.createTextNode(key); 
 
    td.appendChild(txt); 
 
    tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
}

table, td { 
 
    border: 1px solid black; 
 
}

<div> 
 
    <table id="apps"></table> 
 
</div>

来源

2016-11-04 10:09:37

您需要修正您的代码，现在它只为每个TR创建一个TD。 –

不知道您对该项目的要求，但我会跳过所有这些麻烦，并使用像DataTables这样的库。从AJAX或其他data sources有很多方法来填充表格。即使您无法修改表格数据源以符合其标准，也可以重新格式化method。

来源

2016-11-04 00:00:50

你的问题是“哪个更好：表格行和单元格标记已经在标记中，还是在获取数据时构建它们？”

我会说更好的选择是在获取对象时构建数据。

在pseduocode：

for each object in 1 
    make new row <tr></tr> 

    for each data in object 
    make new cell <td></td> 
    insert data into <td>[here]</td> 
    insert cell into <tr>[here]</tr> 

    insert filled row into "apps" by using it's ID 
done

这是否就足够了，你想知道吗？

来源

2016-11-04 00:17:34 Nol

检查这个演示：

var jsonResponse = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     } 
 
    ], 
 
    "2": [{ 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     }, 
 
     { 
 
      "P": "", 
 
      "Q": "", 
 
      "R": "", 
 
      "S": "", 
 
      "T": "" 
 
     } 
 
    ] 
 
}; 
 

 
$.each(jsonResponse, function(outerKey, list) { 
 
    var row = $('<tr>', { 
 
     id: 'row_' + outerKey 
 
    }); 
 
    $.each(list, function(innerKey, value) { 
 
     for (var key in value) { 
 
      var col = $('<td>', { 
 
       id: key, 
 
       text: key 
 
      }) 
 
      row.append(col); 
 
     } 
 
    }); 
 
    $('#apps').append(row); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="apps"></table> 
 
</div>

来源

2016-11-04 03:24:46 four

从JSON数据创建html表格

回答

相关问题