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.

— 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

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":"email1@domain.com"},{"name": "name2","link":"email2@domain.com"}];
//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