我有一些可用的 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>
如何完成此操作,以便动态创建表、实时更新表并从具有最多可选字段的记录创建表标题?
最佳答案
我过去也遇到过类似的问题。
我的解决方案包括拥有一个包含所有可能列的表。否则,不断变化的列名称将导致非常糟糕的用户体验。
因此您必须提前知道要显示的所有字段的名称。
首次加载数据时,您将填充一个遵循您所需结构的对象,并为丢失的数据分配“N/A”。
然后,每次获取一组新数据时,您都可以使用新数据更新自己的对象。
正如 Enzey 在评论中指出的那样,这并不容易。更改列名并不能真正帮助消耗数据,而这是表的最终目标! :)
关于javascript - 在 html 表中动态渲染非结构化 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29762382/