在HTML表格

動態呈現Unstrutured JSON數據我有一些數據，是JSON可用，在這種格式在HTML表格

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

我怎麼能得到這個工作，從而動態地創建表，在實時更新，因此該表頭文件是由記錄最可選的創建字段？

來源

2015-04-21 Alloys

簡短的回答是：不容易。您需要做什麼處理所有數據並確定公共字段，根據該信息生成HTML模板，將該模板存儲在$ templateCache下並生成名稱，使用ng-include顯示模板，其中生成的名稱是範圍上的值。當您需要新模板時，請將其存儲在緩存中的其他名稱下，並使用其值更新範圍值。 – Enzey

該數據是一個實時的飼料，所以該表應該能夠動態調整到新的數據，因此一次處理所有的數據是不可能的。 – Alloys

一個策略是保持飼料的記錄在JavaScript中，並在每次新數據到達時（重新）處理所有數據*。總是從頭開始重新創建表。這將簡化新列出現時的添加。否則，你將不得不將列添加到現有的表中，這可能會有些尷尬。 –

我以前有類似的問題。

我的解決方案包括一個包含所有可能列的表。否則，一個不斷變化的列名會導致真正糟糕的用戶體驗。

所以你必須事先知道你想要顯示的所有字段的名稱。

在首次加載數據時，您會填充符合您所需結構的對象，爲缺失的數據分配「N/A」。

然後，每次獲取一組新數據時，都會使用新數據更新自己的對象。正如Enzey在他的評論中指出的那樣，這並不容易。而更改列名並不能真正幫助消費數據，這是表格的最終目標！ :)

來源

2015-04-21 08:38:30 datamosh

回答

相關問題