如何从json重建一个表格？

Question

以下几乎可以工作：

var data = [{"Mamma":["Papa","Nonna"],"Hello":["Bye","Yes"]}];

var colHeader = Object.keys(data[0]);

for(var i=0; i<colHeader.length; i++) {
    $('table thead tr').append('<td>' + colHeader[i] + '</td>');
}

for(var i=0; i<data.length; i++){
    $('table tbody').append('<tr></tr>')
    for(var j= 0; j<colHeader.length; j++){
    $('table tbody tr').last().append('<td>' + data[i][colHeader[j]] + '</td>');
  }
}

但是根据下面的图片，我得到了一个包含两个值的td表格

这是一个 jsFIddle

- rob.m

---

在 tbody 中每列始终只有两个元素吗？还是 [{"Mamma":["Papa","Nonna", "Could", "Be"],"Hello":["Bye","Yes", "Maybe"]}]; 也是一个有效的输入？ - Scaramouche

可能会有超过两行 @Scaramouche - rob.m

@Scaramouche 你今天帮了我，基本上我们将会从我们使用你的回答 https://stackoverflow.com/a/49613748/1018804 创建的json中得到这个值。 - rob.m

@Scaramouche 这是完整的 jsfiddle，可以随意操作 https://jsfiddle.net/fbh0o67o/8/ - rob.m

Answer 1

你还需要循环对象值，这些值是数组，并按索引附加它们。

var data = [{"Mamma": ["Papa", "Nonna"],"Hello": ["Bye", "Yes"]}];

data.forEach(obj => {
  Object.keys(obj).forEach(key => {
    $('thead').append($('<th>').text(key));

    obj[key].forEach((e, i) => {
      if(!$("tbody tr:eq("+i+")").length) $("<tr>").appendTo($("tbody"));
      $("tbody tr:eq(" + i + ")").append($('<td>').text(e))
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead></thead>
  <tbody></tbody>
</table>

- Nenad Vracar

---

非常感谢。最后一个问题，可以请教一下吗？你看我们在一个变量中设置的JSON格式？我该如何将此处创建的JSON https://jsfiddle.net/fbh0o67o/16/ 转换为那种格式呢？ - rob.m

请用示例展示您得到的JSON数据以及期望的输出。 - Nenad Vracar

基本上它生成了一个类似于这样的JSON [{ "Mamma": [ "[Papa]", "[Nonna]" ], "Hello": [ "[Bye]", "[Yes]" ] }] (index):91 [{ "Mamma": [ "[Papa]", "[Nonna]" ], "Hello": [ "[Bye]", "[Yes]" ] }] - rob.m

这是无效的数据。 - Nenad Vracar

我觉得它有问题，我该如何调整才能使其有效？https://jsfiddle.net/fbh0o67o/27/ - rob.m

Answer 2

请尝试使用此片段中的示例，并告诉我是否输出了预期结果。

var data = [{"Hello": ["Bye", "", "", "", "", ""],"h2": ["", "", "", "c", "", "d"]}];

var outerIndex = 0;
$.each(data[0],(key, arr) => {
    $('thead').append($('<th>').text(key));

    data[0][key].forEach((e, i) => {
      if(!$("tbody tr:eq("+i+")").length)
        $("<tr>").appendTo($("tbody"));
        var colIndex = $("tbody tr:eq(" + i + ")").children('td').length;
        while(colIndex++ !== outerIndex){
          $("tbody tr:eq(" + i + ")").append('<td>');
        }
                
      $("tbody tr:eq(" + i + ")").append($('<td>').text(e))
    })
    outerIndex++
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead></thead>
  <tbody></tbody>
</table>

- Scaramouche

---

是的，完全正确。因为实际上我会将JSON发送到数据库，然后在页面加载时调用它，表格构建工具将在CMS中，而重建表位将在页面上。 - rob.m

@rob.m 我看到有人已经指出问题在于你在字符串上调用了 forEach。 - Scaramouche

是的，看到了，正在尝试修复它，它几乎可以工作，只是没有打印出所有的值。https://jsfiddle.net/fbh0o67o/65/ - rob.m

@rob.m，我刚刚尝试了你的fiddle并输入了一些内容，但输出结果有点混乱。也许这不是有效的输入，也可能是，希望你能检查一下。这个fiddle是在我的更新答案中提供的，希望对你有所帮助。 - Scaramouche

为什么有人要填充一个空表？ - rob.m