轉換JSON數據到一個HTML表格

是否有任何的jQuery或JavaScript庫，產生給出JSON數據動態表？我不想定義列，庫應該讀取json散列中的鍵並生成列。轉換JSON數據到一個HTML表格

當然，我可以自己遍歷JSON數據並生成HTML表。我只想知道是否有這樣的圖書館存在，我可以簡單地重複使用。

來源

2011-03-03 Manish Mulani

好了，感謝您的答覆。但爲了滿足我的要求，我爲自己寫了一個。 http://jsfiddle.net/manishmmulani/7MRx6/ – 2011-03-03 14:30:20

您也可以使用Github上這個簡單的項目：[JSON-TO-HTML-表（https://github.com/afshinm/Json-to-HTML-Table ） – 2011-04-13 20:31:11

我認爲http://www.trirand.com/blog/是你正在尋找的。它需要JSON並將其轉換爲網格。 – 2011-03-03 11:58:56

感謝所有您的答覆。 I wrote one myself.請注意，這使用jQuery。

代碼片段：

var myList = [ 
 
    { "name": "abc", "age": 50 }, 
 
    { "age": "25", "hobby": "swimming" }, 
 
    { "name": "xyz", "hobby": "programming" } 
 
]; 
 

 
// Builds the HTML Table out of myList. 
 
function buildHtmlTable(selector) { 
 
    var columns = addAllColumnHeaders(myList, selector); 
 

 
    for (var i = 0; i < myList.length; i++) { 
 
    var row$ = $('<tr/>'); 
 
    for (var colIndex = 0; colIndex < columns.length; colIndex++) { 
 
     var cellValue = myList[i][columns[colIndex]]; 
 
     if (cellValue == null) cellValue = ""; 
 
     row$.append($('<td/>').html(cellValue)); 
 
    } 
 
    $(selector).append(row$); 
 
    } 
 
} 
 

 
// Adds a header row to the table and returns the set of columns. 
 
// Need to do union of keys from all records as some records may not contain 
 
// all records. 
 
function addAllColumnHeaders(myList, selector) { 
 
    var columnSet = []; 
 
    var headerTr$ = $('<tr/>'); 
 

 
    for (var i = 0; i < myList.length; i++) { 
 
    var rowHash = myList[i]; 
 
    for (var key in rowHash) { 
 
     if ($.inArray(key, columnSet) == -1) { 
 
     columnSet.push(key); 
 
     headerTr$.append($('<th/>').html(key)); 
 
     } 
 
    } 
 
    } 
 
    $(selector).append(headerTr$); 
 

 
    return columnSet; 
 
}

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

 
<body onLoad="buildHtmlTable('#excelDataTable')"> 
 
    <table id="excelDataTable" border="1"> 
 
    </table> 
 
</body>

來源

2012-07-14 03:35:36

喜@馬尼什 - mulani這個沒有工作給我，ü可以再次檢查 – Nish 2013-03-28 00:22:20

@Nish你檢查http://jsfiddle.net/manishmmulani/ 7MRx6 – 2013-04-25 07:13:36

您好，我試圖讓從URL中的數據，但它似乎沒有工作 – 2015-06-24 16:52:48

檢出~~JSON2HTML~~http://json2html.com/ jQuery的插件。它允許您指定一個將您的JSON對象轉換爲HTML模板的轉換。使用http://json2html.com/上的構建器獲取任何所需的html模板的json轉換對象。在你的情況下，它將成爲一個行，並有下列轉換。

例子：

var transform = {"tag":"table", "children":[ 
    {"tag":"tbody","children":[ 
     {"tag":"tr","children":[ 
      {"tag":"td","html":"${name}"}, 
      {"tag":"td","html":"${age}"} 
     ]} 
    ]} 
]}; 

var data = [ 
    {'name':'Bob','age':40}, 
    {'name':'Frank','age':15}, 
    {'name':'Bill','age':65}, 
    {'name':'Robert','age':24} 
]; 

$('#target_div').html(json2html.transform(data,transform));

來源

2011-06-23 18:57:32 Chad

想我會在這裏更新鏈接到http://json2html.com – 2012-12-28 04:50:54

我已經重寫你的代碼香草JS，使用DOM方法來防止HTML注入。

Demo

var _table_ = document.createElement('table'), 
    _tr_ = document.createElement('tr'), 
    _th_ = document.createElement('th'), 
    _td_ = document.createElement('td'); 

// Builds the HTML Table out of myList json data from Ivy restful service. 
function buildHtmlTable(arr) { 
    var table = _table_.cloneNode(false), 
     columns = addAllColumnHeaders(arr, table); 
    for (var i=0, maxi=arr.length; i < maxi; ++i) { 
     var tr = _tr_.cloneNode(false); 
     for (var j=0, maxj=columns.length; j < maxj ; ++j) { 
      var td = _td_.cloneNode(false); 
       cellValue = arr[i][columns[j]]; 
      td.appendChild(document.createTextNode(arr[i][columns[j]] || '')); 
      tr.appendChild(td); 
     } 
     table.appendChild(tr); 
    } 
    return table; 
} 

// Adds a header row to the table and returns the set of columns. 
// Need to do union of keys from all records as some records may not contain 
// all records 
function addAllColumnHeaders(arr, table) 
{ 
    var columnSet = [], 
     tr = _tr_.cloneNode(false); 
    for (var i=0, l=arr.length; i < l; i++) { 
     for (var key in arr[i]) { 
      if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) { 
       columnSet.push(key); 
       var th = _th_.cloneNode(false); 
       th.appendChild(document.createTextNode(key)); 
       tr.appendChild(th); 
      } 
     } 
    } 
    table.appendChild(tr); 
    return columnSet; 
}

來源

2014-01-11 17:59:45 Oriol

是否可以使用嵌套的json對象進行此項工作？ – 2016-08-10 18:49:24

@JanacMeena我認爲你會需要n維表。 – Oriol 2016-08-10 18:53:55

的確如此。表格內的表格。另外，我發現允許嵌套json的zoomable treemaps – 2016-08-11 15:20:11

您可以使用簡單的jQuery插件jPut

http://plugins.jquery.com/jput/

<script> 
$(document).ready(function(){ 

var json = [{"name": "name1","email":"[email protected]"},{"name": "name2","link":"[email protected]"}]; 
//while running this code the template will be appended in your div with json data 
$("#tbody").jPut({ 
    jsonData:json, 
    //ajax_url:"youfile.json", if you want to call from a json file 
    name:"tbody_template", 
}); 

}); 
</script> 

<table jput="t_template"> 
<tbody jput="tbody_template"> 
    <tr> 
     <td>{{name}}</td> 
     <td>{{email}}</td> 
    </tr> 
</tbody> 
</table> 

<table> 
<tbody id="tbody"> 
</tbody> 
</table>

來源

2014-06-01 15:06:35 shabeer

轉換JSON數據到一個HTML表格

回答

相關問題