Javascript 从JSON构建动态表

在过去的几天里，我一直在努力构建这个动态表。我已经用几种不同的方法构建了它，并且最终得到了正确的输出，但是我所做的工作是手动的。我希望有人能帮我让这变得更有活力

下面是我的JSON示例（超级简化）

我需要输出看起来像这样（就是这样），但是我的数组中可能有6个以上的对象，所以我需要遍历它，而不是手工构建它

1234   5678    9012    3456    2445    6543
John   Mike     Tom    Chris   Pat     James
Green  Green   Red     Red     Green   Green

这是到目前为止我的代码。任何帮助都将不胜感激

for (j in obj1.Summary[0]) {
document.write('<tr><td class="' + j +'">' + j + '</td><td class="' + j +'">' +     obj1.Summary[0][j] + '</td><td class="' + j +'">' + obj1.Summary[1][j] + '</td><td class="' + j +'">' + obj1.Summary[2][j] + '</td><td class="' + j +'">' + obj1.Summary[3][j] + '</td><td class="' + j +'">' + obj1.Summary[4][j] + '</td><td class="' + j +'">' + obj1.Summary[5][j] + '</td></tr>');
}

for（在obj1.Summary[0]中的j）{
文件.书写（'+j++'+obj1.Summary[0][j]+'+obj1.Summary[1][j]+'+obj1.Summary[2][j]+'+obj1.Summary[3][j]+'+obj1.Summary[4][j]+'+obj1.Summary[5][j]+''）；
}

当您想要重复逻辑时，应该使用循环

您可能会发现渲染库也很有用，以避免与字符串连接混淆

编辑

没问题，仍然使用循环。在循环中构建行并将它们连接在一起。请参阅特别是

forEach

和

join

// specify keys and init rows

var keys = [ "ID" ] 
var rows = {}

keys.forEach(function (key) {
  rows[key] = []
})

// ok now we have rows

console.log(rows)

// add table cells to rows

summaryObjects.forEach(function (object) {
  for (var key in object) {
    var cell = "<td>" + object[key] + "</td>"
    rows[key].push(cell)
  }
})

// now we have cells in the rows

console.log(rows)

// put together the table

keys.forEach(function (key) {
  document.write("<tr>" + rows[key].join('') + "</tr>")
})

你想要什么

{
  key: [ value, value ],
  key: [ value, value ]
}

---

当您想要重复逻辑时，应该使用循环

您可能会发现渲染库也很有用，以避免与字符串连接混淆

编辑

没问题，仍然使用循环。在循环中构建行并将它们连接在一起。请参阅特别是

forEach

和

join

// specify keys and init rows

var keys = [ "ID" ] 
var rows = {}

keys.forEach(function (key) {
  rows[key] = []
})

// ok now we have rows

console.log(rows)

// add table cells to rows

summaryObjects.forEach(function (object) {
  for (var key in object) {
    var cell = "<td>" + object[key] + "</td>"
    rows[key].push(cell)
  }
})

// now we have cells in the rows

console.log(rows)

// put together the table

keys.forEach(function (key) {
  document.write("<tr>" + rows[key].join('') + "</tr>")
})

你想要什么

{
  key: [ value, value ],
  key: [ value, value ]
}

---

我建议使用诸如Handlebarsjs这样的模板来实现这一点。这样，您就可以将html与JavaScript分开，而不必添加太多的“+”

例如，您可以将其嵌入到html中

<script id="template" type="text/x-handlebars-template">

    {{#each Summary}}

        <tr><td>{{this.ID}}</td>
            <td>{{this.Name}}</td>
            <td>{{this.Status}}</td>
        </tr>

    {{/each}}
</script>

---

希望能有帮助

我建议使用Handlebarsjs这样的模板来实现这一点。这样，您就可以将html与JavaScript分开，而不必添加太多的“+”

例如，您可以将其嵌入到html中

<script id="template" type="text/x-handlebars-template">

    {{#each Summary}}

        <tr><td>{{this.ID}}</td>
            <td>{{this.Name}}</td>
            <td>{{this.Status}}</td>
        </tr>

    {{/each}}
</script>

---

希望能有帮助

制作一个变量并将文本放入其中。这样，您可以使用嵌套循环构建它，然后将其插入文档中。我只是在PHP中做了一些类似的事情，可以将db表作为嵌套数组，并从中生成一个表

var table = "<table>";

//we loop over the attributes since you want that format
for (userAttribute in obj1.Summary[0]) {
  //these are your headers/titles
  table += '<tr><th>' + userAttribute + '</th>';

  //and here we build a row getting the attribute from each user
  for (userIndex in obj1.Summary) {
    var user = obj1.Summary[userIndex];
    table += '<td>' + user[userAttribute] + '</td>';
  }  
  table += '</tr>'; //close that row and move on to the next attribute
}

//close out the table
table += '</table>';

document.write(table);

var表=”；
//我们在属性上循环，因为您需要该格式
for（obj1.Summary[0]中的userAttribute）{
//这些是你的标题
表+=''+用户属性+''；
//在这里，我们构建一行，从每个用户获取属性
for（obj1.Summary中的用户索引）{
var user=obj1.Summary[userIndex]；
表+=''+用户[userAttribute]+''；
}  
table+=''；//关闭该行并转到下一个属性
}
//收起桌子
表+=''；
文件。书写（表格）；

制作一个变量并将文本放入其中。这样，您可以使用嵌套循环构建它，然后将其插入文档中。我只是在PHP中做了一些类似的事情，可以将db表作为嵌套数组，并从中生成一个表

var table = "<table>";

//we loop over the attributes since you want that format
for (userAttribute in obj1.Summary[0]) {
  //these are your headers/titles
  table += '<tr><th>' + userAttribute + '</th>';

  //and here we build a row getting the attribute from each user
  for (userIndex in obj1.Summary) {
    var user = obj1.Summary[userIndex];
    table += '<td>' + user[userAttribute] + '</td>';
  }  
  table += '</tr>'; //close that row and move on to the next attribute
}

//close out the table
table += '</table>';

document.write(table);

var表=”；
//我们在属性上循环，因为您需要该格式
for（obj1.Summary[0]中的userAttribute）{
//这些是你的标题
表+=''+用户属性+''；
//在这里，我们构建一行，从每个用户获取属性
for（obj1.Summary中的用户索引）{
var user=obj1.Summary[userIndex]；
表+=''+用户[userAttribute]+''；
}  
table+=''；//关闭该行并转到下一个属性
}
//收起桌子
表+=''；
文件。书写（表格）；

我最近提出了一个有趣的模式，用于从数据库输出动态创建表，同时保留对相关已创建元素和用于创建它们的值的引用

这个方法对我来说很方便，因为我为每个表单元格创建了输入元素，然后利用创建的结构将原始值与实际值进行检查，并根据更改的字段生成sql更新查询

我意识到，对于这种特定情况来说，它可能有些过分，但它确实有助于可读性和可维护性，因此我将它发布在这里，以防将来它可能会帮助其他人

var-responseText={“Summary”：[{“ID”：“1234”，“Name”：“John”，“Status”：“Green”，}，{“ID”：“5678”，“Name”：“Mike”，“Status”：“Green”，}，{“ID”：“9012”，“Name”：“Tom”，“Status”：“Red”，}，{“ID”：“3456”，“Name”：“Chris”，“Status”：“Red”，}，{“ID”：“2445”，“Name”：“Pat；
var list=新列表（responseText.Summary）；
document.body.appendChild（list.node）；
功能列表（数据）{
如果（！（列表的此实例））返回false；
var list=this.node=document.createElement（'div'）；
setAttribute（'class'，'list'）；
var items=this.items={}；
用于（数据中的var i）{
items[i]=新列表项（数据[i]）
list.appendChild（items[i].node）；
}
}
函数列表项（数据）{
如果（！（ListItem的此实例））返回false；
var item=this.node=document.createElement（'div'）；
setAttribute（'class'，'item'）；
var lines=this.lines={}；
用于（数据中的var i）{
行[i]=新的ListItemLine（i，数据[i]）
item.appendChild（第[i]行，节点）；
}
}
函数ListItemLine（名称、值）{
如果（！（ListItemLine的此实例））返回false；
var line=this.node=document.createElement（'div'）；
this.name=名称；
这个值=值；
setAttribute（'class'，'line'+名称）；
如果（名称！=“ID”）
line.setAttribute（'contenteditable'，true）；
line.appendChild（document.createTextNode（值））；
}

.item{
显示：内联块；
填充物：5px；
文本对齐：居中；
}

我最近提出了一个有趣的模式，用于从数据库输出动态创建表，同时保留对相关已创建元素和用于创建它们的值的引用

这种方法可以用于凸轮

var table = "<table>";

//we loop over the attributes since you want that format
for (userAttribute in obj1.Summary[0]) {
  //these are your headers/titles
  table += '<tr><th>' + userAttribute + '</th>';

  //and here we build a row getting the attribute from each user
  for (userIndex in obj1.Summary) {
    var user = obj1.Summary[userIndex];
    table += '<td>' + user[userAttribute] + '</td>';
  }  
  table += '</tr>'; //close that row and move on to the next attribute
}

//close out the table
table += '</table>';

document.write(table);