Chuyển đổi dữ liệu json sang bảng html [đã đóng]

112

Có bất kỳ thư viện jQuery hoặc javascript nào tạo bảng động cung cấp dữ liệu json không? Tôi không muốn xác định các cột, thư viện sẽ đọc các khóa trong hàm băm json và tạo các cột.

Tất nhiên, tôi có thể tự mình lặp lại dữ liệu json và tạo bảng html. Tôi chỉ muốn biết liệu có thư viện nào như vậy tồn tại mà tôi có thể đơn giản sử dụng lại hay không.

— Manish Mulani
nguồn

Tôi nghĩ trirand.com/blog là những gì bạn đang tìm kiếm. Nó sử dụng JSON và chuyển đổi nó thành một lưới.

— Gokul NK

1

Vâng, Cảm ơn vì đã trả lời. Nhưng để đáp ứng yêu cầu của tôi, tôi đã viết một cái cho chính mình. jsfiddle.net/manishmmulani/7MRx6

— Manish Mulani

2

Bạn cũng có thể sử dụng dự án này đơn giản trên Github: Json-To-HTML-Table

— Afshin Mehrabani

Dễ dàng hơn vào năm 2020, chỉ cần sử dụng github.com/arters/Convert-json-data-to-a-html-template

— kkasp Ngày

136

Cảm ơn tất cả trả lời của bạn. Tôi đã viết một bản thân mình. Xin lưu ý rằng điều này sử dụng jQuery.

Đoạn mã:

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>

Mở rộng đoạn mã

— Manish Mulani
nguồn

Xin chào @ Manish-mulani, điều này không hiệu quả với tôi, bạn có thể kiểm tra lại

— Nish

1

@Nish Bạn đã kiểm tra jsfiddle.net/manishmmulani/7MRx6

— Manish Mulani

1

Hi, tôi đã cố gắng để có được những dữ liệu từ một url, nhưng nó dường như không làm việc

3

Chào. Cái này phù hợp với tôi. Tuy nhiên tôi có một câu hỏi. Tại sao không có thẻ mở trvà tdthẻ? Cảm ơn.

— Cyval

function addAllColumnHeaders(myList)- sai. nên được function addAllColumnHeaders(myList,selector). BTW này hoạt động hoàn hảo !!

— Shirker

61

Tôi đã viết lại mã của bạn bằng vanilla-js, sử dụng các phương pháp DOM để ngăn chặn việc đưa html vào.

Bản giới thiệu

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

Mở rộng đoạn mã

— Oriol
nguồn

1

Có thể làm cho điều này hoạt động với một đối tượng json lồng nhau không?

— Janac Meena

@JanacMeena Tôi nghĩ bạn sẽ cần bảng n-chiều cho điều đó.

— Oriol

Đúng. Các bảng trong các bảng. Ngoài ra, tôi phát hiện ra Bản đồ cây Zoomable mà cho phép json lồng nhau

— Janac Meena

Chức năng tương tự này, nhưng trả về một bảng xoay, sẽ là beautifull

— ndelucca

1

@Shai sử dụng JSON.parse (yourVariable) và gửi nó đến buldHTMLTable

— xSx

13

Bạn có thể sử dụng plugin jQuery jPut đơn giản

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
nguồn

13

Kiểm tra plugin ~~JSON2HTML~~ http://json2html.com/ cho jQuery. Nó cho phép bạn chỉ định một chuyển đổi sẽ chuyển đổi đối tượng JSON của bạn thành mẫu HTML. Sử dụng trình tạo trên http://json2html.com/ để nhận đối tượng biến đổi json cho bất kỳ mẫu html mong muốn nào. Trong trường hợp của bạn, nó sẽ là một bảng có hàng có biến đổi sau.

Thí dụ:

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
nguồn

hình dung là tôi sẽ cập nhật liên kết ở đây thành json2html.com

— Chad Brown