javascript - 如何在表格中动态显示不同长度对象的数组？

Question

我有一个所有值都不同的对象数组:

[
    {"val"::val,"xxx":"zzz","eee":"fff"},
    {"val":val},
    {val"::val,"xxx":"zzz","eee":"fff","val":val,"xxx":"zzz","eee":"fff"}
]

不同的属性名称有不同的值。我正在尝试在 html 表中动态显示它们。

重点是要有一个没有标题的表格，其中行的长度可以与前一行不同，并且只显示指定的值。

在前面的示例中，结果将是一个包含以下内容的表格: 3 行。

The first row having 3 cell
val | zzz | fff 

second row 1 cell
val |

Third row 6 cell
val | zzz | fff | val | zzz | fff

我知道我不知道任何值的键，并且只需要显示该值，并且没有 th，如何生成这样的表。我也无法预测文档的长度。

Answer 1

对象不应具有重复的属性名称。 ::不是有效的语法。您可以Array.prototype.forEach() , Object.keys()追加<tr>和<td>元素到<table>元素。

var arr = [{
  "val": "val",
  "xxx": "zzz",
  "eee": "fff"
}, {
  "val": "val"
}, {
  "val": "val",
  "xxx": "zzz",
  "eee": "fff",
  "val1": "val",
  "xxx1": "zzz",
  "eee1": "fff"
}];

var table = document.querySelector("table");

arr.forEach(function(value, key) {
  var tr = table.insertRow();
  var keys = Object.keys(value);
  keys.forEach(function(prop, key) {
    var td = tr.insertCell();
    td.innerHTML = value[prop] + (key < keys.length - 1 ? " | " : "");
    tr.appendChild(td);
  });
});

<table>
  <tbody></tbody>
</table>