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>元素。

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

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

1 个答案: