從JSON數據創建html表格

我有一個html文件，它有這個片段。從JSON數據創建html表格

<div> 
    <table id="apps"></table> 
</div>

我收到了，看起來像這樣JSON數據：

{ 
    "1": [ 
     { 
      "A": "", 
      "B": "", 
      "C": "", 
      "D": "", 
      "E": "" 
     } 
    ] 
}

將有整整一個"1"，但可以在那裏的"1"列表中一個以上的字典。在此示例中，我們在列表中只有一個{}，即[]，但可能存在多個包含如上所示的五個項目的多個{}。

我想從這個數據中創建一個表格，其中每行表示[]中的一個單獨的{}，並且分別具有代表A，B，C，D，E的五列。

我不確定是否應該有這個結構，標籤已經在我的HTML（這不是在我的HTML代碼提供），然後填充這些標籤或應該我的函數加載這個數據在我的HTML文件，訪問表ID =「應用程序」，並創建這些標籤，然後填充這些標籤？哪個更好？以及如何有效地完成這項工作？

來源

2016-11-03 Teodorico Levoff

如果這不是一個家庭作業，我會強烈建議jQuery的數據表，因爲它確實將JSON數據到一個表的出色。 – Doug

試試這個簡單的工作示例。我希望它能按你的期望工作。

var dataObj = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     }, 
 
     { 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     } 
 
    ]}; 
 

 
var dictionaryData = dataObj["1"]; 
 

 
for (var i in dictionaryData) { 
 
    var table = document.getElementById("apps"); 
 
    var tr = document.createElement("tr"); 
 
    var td = document.createElement("td"); 
 
    
 
    for (var key in dictionaryData[i]) { 
 
    var txt = document.createTextNode(key); 
 
    td.appendChild(txt); 
 
    tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
}

table, td { 
 
    border: 1px solid black; 
 
}

<div> 
 
    <table id="apps"></table> 
 
</div>

來源

2016-11-04 10:09:37

您需要修正您的代碼，現在它只爲每個TR創建一個TD。 –

不知道您對該項目的要求，但我會跳過所有這些麻煩，並使用像DataTables這樣的庫。從AJAX或其他data sources有很多方法來填充表格。即使您無法修改表格數據源以符合其標準，也可以重新格式化method。

來源

2016-11-04 00:00:50

你的問題是「哪個更好：表格行和單元格標記已經在標記中，還是在獲取數據時構建它們？」

我會說更好的選擇是在獲取對象時構建數據。

在pseduocode：

for each object in 1 
    make new row <tr></tr> 

    for each data in object 
    make new cell <td></td> 
    insert data into <td>[here]</td> 
    insert cell into <tr>[here]</tr> 

    insert filled row into "apps" by using it's ID 
done

這是否就足夠了，你想知道嗎？

來源

2016-11-04 00:17:34 Nol

檢查這個演示：

var jsonResponse = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     } 
 
    ], 
 
    "2": [{ 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     }, 
 
     { 
 
      "P": "", 
 
      "Q": "", 
 
      "R": "", 
 
      "S": "", 
 
      "T": "" 
 
     } 
 
    ] 
 
}; 
 

 
$.each(jsonResponse, function(outerKey, list) { 
 
    var row = $('<tr>', { 
 
     id: 'row_' + outerKey 
 
    }); 
 
    $.each(list, function(innerKey, value) { 
 
     for (var key in value) { 
 
      var col = $('<td>', { 
 
       id: key, 
 
       text: key 
 
      }) 
 
      row.append(col); 
 
     } 
 
    }); 
 
    $('#apps').append(row); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="apps"></table> 
 
</div>

來源

2016-11-04 03:24:46 four

從JSON數據創建html表格

回答

相關問題