Ubah data json menjadi tabel html [closed]

112

Apakah ada pustaka jQuery atau javascript yang menghasilkan tabel dinamis yang diberikan data json? Saya tidak ingin menentukan kolom, perpustakaan harus membaca kunci di hash json dan membuat kolom.

Tentu saja, saya sendiri dapat melakukan iterasi melalui data json dan membuat tabel html. Saya hanya ingin tahu apakah ada perpustakaan seperti itu yang dapat saya gunakan kembali.

javascript html json html-table Manish Mulani
sumber
Menurut saya trirand.com/blog adalah yang Anda cari. Dibutuhkan JSON dan mengubahnya menjadi grid.
Gokul NK
1
Terima kasih atas balasannya. Tetapi untuk memenuhi persyaratan saya, saya menulis satu untuk diri saya sendiri. jsfiddle.net/manishmmulani/7MRx6
Manish Mulani
2
Anda juga dapat menggunakan proyek sederhana ini di Github: Json-To-HTML-Table
Afshin Mehrabani
Lebih mudah di tahun 2020, cukup gunakan github.com/arters/Convert-json-data-to-a-html-template
kkasp

Jawaban:

136

Terima kasih atas balasan Anda. Saya menulis satu sendiri. Harap dicatat bahwa ini menggunakan jQuery.

Potongan kode: 

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

Manish Mulani
sumber
Hai @ Manish-mulani ini tidak berhasil untuk saya, bisakah kamu memeriksa lagi
Nish
1
@Nish Apakah Anda memeriksa jsfiddle.net/manishmmulani/7MRx6
Manish Mulani
1
Hai, saya mencoba mendapatkan data dari url, tetapi tampaknya tidak berfungsi
3
Hai. Yang ini berhasil untuk saya. Namun saya punya pertanyaan. Mengapa tidak ada pembukaan trdan tdtag? Terima kasih.
Cyval
function addAllColumnHeaders(myList)- salah. seharusnya function addAllColumnHeaders(myList,selector). BTW ini bekerja dengan sempurna !!
Shirker
61

Saya telah menulis ulang kode Anda di vanilla-js, menggunakan metode DOM untuk mencegah injeksi 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;
}

document.body.appendChild(buildHtmlTable([{
    "name": "abc",
    "age": 50
  },
  {
    "age": "25",
    "hobby": "swimming"
  },
  {
    "name": "xyz",
    "hobby": "programming"
  }
]));
Luaskan cuplikan

Oriol
sumber
1
Apakah mungkin membuat ini bekerja dengan objek json bersarang?
Janac Meena
@ JanacMeena Saya pikir Anda akan membutuhkan tabel n-dimensi untuk itu.
Oriol
Itu benar. Tabel dalam tabel. Juga, saya menemukan peta hierarki yang dapat diperbesar yang memungkinkan json bersarang
Janac Meena
Fungsi yang sama tetapi mengembalikan tabel berporos, akan menjadi sangat indah
ndelucca
1
@Shai menggunakan JSON.parse (yourVariable) dan mengirimkannya ke buldHTMLTable
xSx
13

Anda dapat menggunakan plugin jQuery jPut sederhana

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>
shabeer
sumber
13

Lihat JSON2HTML http://json2html.com/ plugin untuk jQuery. Ini memungkinkan Anda untuk menentukan transformasi yang akan mengubah objek JSON Anda menjadi template HTML. Gunakan pembuat di http://json2html.com/ untuk mendapatkan objek transformasi json untuk template html yang diinginkan. Dalam kasus Anda, ini akan menjadi tabel dengan baris yang memiliki transformasi berikut.

Contoh: 

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));
Chad
sumber
kupikir saya akan memperbarui tautan di sini ke json2html.com
Chad Brown