Json verilerini bir html tablosuna dönüştürme [kapalı]

112

Json verileri verilen dinamik bir tablo oluşturan herhangi bir jQuery veya javascript kitaplığı var mı? Sütunları tanımlamak istemiyorum, kütüphane json karmasındaki anahtarları okumalı ve sütunlar oluşturmalıdır.

Tabii ki, json verilerini yineleyip html tablosunu oluşturabilirim. Sadece yeniden kullanabileceğim böyle bir kitaplık olup olmadığını bilmek istiyorum.

— Manish Mulani
kaynak

Sanırım aradığınız şey trirand.com/blog . JSON alır ve onu bir ızgaraya dönüştürür.

— Gokul NK

1

Cevaplar için teşekkürler. Ama gereksinimlerimi karşılamak için kendime bir tane yazdım. jsfiddle.net/manishmmulani/7MRx6

— Manish Mulani

2

Bu basit projeyi Github'da da kullanabilirsiniz: Json-To-HTML-Table

— Afshin Mehrabani

2020'de daha kolay, github.com/arters/Convert-json-data-to-a-html-template

— kkasp

137

Bütün cevaplarınız için teşekkürler. Kendim yazdım. Lütfen bunun jQuery kullandığını unutmayın.

Kod pasajı:

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>

Snippet'i genişlet

— Manish Mulani
kaynak

Merhaba @ Manish-mulani, bu bende işe yaramadı, tekrar kontrol edebilir misin

— Nish

1

@Nish jsfiddle.net/manishmmulani/7MRx6

— Manish

1

Merhaba, verileri bir url'den almaya çalıştım ama işe yaramıyor

3

Selam. Bu benim için çalışıyor. Ancak bir sorum var. Neden açılış trve tdetiket yok? Teşekkürler.

— Cyval

function addAllColumnHeaders(myList)- Hata. olmalıdır function addAllColumnHeaders(myList,selector). BTW bu mükemmel çalışıyor!

— Shirker

61

HTML enjeksiyonunu önlemek için DOM yöntemlerini kullanarak kodunuzu vanilla-js'de yeniden yazdım.

gösteri

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"
  }
]));

Snippet'i genişlet

— Oriol
kaynak

1

Bunun iç içe geçmiş bir json nesnesiyle çalışması mümkün müdür?

— Janac Meena

@JanacMeena Bunun için n boyutlu tablolara ihtiyacınız olacağını düşünüyorum.

— Oriol

Bu doğru. Tablolar içindeki tablolar. Ayrıca, iç içe geçmiş json'a izin veren yakınlaştırılabilir ağaç haritaları keşfettim

— Janac Meena

Aynı işlev, ancak

— özetlenmiş

1

JSON.parse (yourVariable) kullanın ve buldHTMLTable göndermek @Shai

— xsx

13

Basit jQuery jPut eklentisini kullanabilirsiniz

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
kaynak

13

JQuery için ~~JSON2HTML~~ http://json2html.com/ eklentisine göz ~~atın~~ . JSON nesnenizi HTML şablonuna dönüştürecek bir dönüşüm belirtmenize olanak tanır. İstediğiniz herhangi bir html şablonu için json dönüşüm nesnesini almak üzere http://json2html.com/ adresindeki oluşturucuyu kullanın . Sizin durumunuzda, aşağıdaki dönüşüme sahip satır içeren bir tablo olacaktır.

Misal:

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));

— Çad
kaynak

Buradaki bağlantıyı json2html.com'a

— Chad Brown