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>
  <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

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

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

因此，您必须事先知道要显示的所有字段的名称。

首次加载数据时，您将填充一个符合您所需结构的对象，分配＆＃34; N / A＆＃34;缺少数据。

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

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

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

1 个答案: