javascript - 在 html 表中动态渲染非结构化 JSON 数据

Question

我有一些可用的 json 格式的数据

"card": {
  "id": "ybLaK64d",
  "type": "VISA",
  "last4": "1881",
  "expMonth": 11,
  "expYear": 17,
  "dateCreated": 1429515587898,
  "cardEntryMode": "E_COMMERCE"
},
"disputed": false,
"amount": 1000,
"settlementAmount": 1000,
"tagPurchase":true, //optional  

卡片对象结构是固定的，但最多可以有 10 个额外的可选字段。我想在 html 表中动态呈现它，这样缺少字段的行就会被标记为 undefined。我的前端是 angularjs，通过 $http 拉入 json。我的决赛 table 会是这样的

<table>
  <thead>
    <tr>
      <td>card.id</td>
      <td>card.type</td>
      .
      .
      .
     <td>card.cardentrymode</td>
     <td>disputed</td>
     <td>amount</td>
    </tr>
  </thead>
  <tbody>
      .
      .
      .
  </tbody>
<table>

如何完成此操作，以便动态创建表、实时更新表并从具有最多可选字段的记录创建表标题？

Answer 1

我过去也遇到过类似的问题。

我的解决方案包括拥有一个包含所有可能列的表。否则，不断变化的列名称将导致非常糟糕的用户体验。

因此您必须提前知道要显示的所有字段的名称。

首次加载数据时，您将填充一个遵循您所需结构的对象，并为丢失的数据分配“N/A”。

然后，每次获取一组新数据时，您都可以使用新数据更新自己的对象。

正如 Enzey 在评论中指出的那样，这并不容易。更改列名并不能真正帮助消耗数据，而这是表的最终目标! :)