แปลงข้อมูล json เป็นตาราง html [ปิด]

112

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow

ปิดให้บริการใน6 ปีที่ผ่านมา

มีไลบรารี jQuery หรือ javascript ที่สร้างตารางไดนามิกที่ให้ข้อมูล json หรือไม่ ฉันไม่ต้องการกำหนดคอลัมน์ไลบรารีควรอ่านคีย์ในแฮช json และสร้างคอลัมน์

แน่นอนฉันสามารถทำซ้ำผ่านข้อมูล json และสร้างตาราง html ได้ ฉันแค่อยากรู้ว่ามีห้องสมุดที่สามารถนำมาใช้ซ้ำได้หรือไม่

— Manish Mulani
แหล่งที่มา

ฉันคิดว่าtrirand.com/blogคือสิ่งที่คุณกำลังมองหา ใช้ JSON และแปลงเป็นตาราง

— Gokul NK

1

ขอบคุณสำหรับคำตอบ แต่เพื่อให้เพียงพอกับความต้องการของฉันฉันเขียนหนึ่งสำหรับตัวเอง jsfiddle.net/manishmmulani/7MRx6

— Manish Mulani

2

คุณยังสามารถใช้โครงการง่ายๆนี้บน Github: Json-To-HTML-Table

— Afshin Mehrabani

ง่ายขึ้นในปี 2020 เพียงใช้github.com/arters/Convert-json-data-to-a-html-template

— kkasp

137

ขอบคุณสำหรับการตอบกลับของคุณ ฉันเขียนเอง โปรดทราบว่าสิ่งนี้ใช้ 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>

ขยายข้อมูลโค้ด

— Manish Mulani
แหล่งที่มา

สวัสดี @ Manish-mulani สิ่งนี้ใช้ไม่ได้กับฉันคุณช่วยตรวจสอบอีกครั้งได้ไหม

— Nish

1

@Nish คุณตรวจสอบjsfiddle.net/manishmmulani/7MRx6

— Manish Mulani

1

สวัสดีฉันพยายามดึงข้อมูลจาก url แต่ดูเหมือนจะไม่ได้ผล

3

สวัสดี อันนี้ใช้ได้กับฉัน อย่างไรก็ตามฉันมีคำถาม ทำไมไม่มีการเปิดtrและtdแท็ก ขอบคุณ

— Cyval

function addAllColumnHeaders(myList)- มันผิด. function addAllColumnHeaders(myList,selector)ควรจะเป็น BTW งานนี้สมบูรณ์แบบ !!

— Shirker

61

ฉันเขียนรหัสของคุณใหม่ใน vanilla-js โดยใช้วิธี DOM เพื่อป้องกันการฉีด html

การสาธิต

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

ขยายข้อมูลโค้ด

— Oriol
แหล่งที่มา

1

เป็นไปได้หรือไม่ที่จะทำงานนี้ด้วยวัตถุ json ที่ซ้อนกัน

— Janac Meena

@ JanacMeena ฉันคิดว่าคุณจะต้องมีตาราง n มิติสำหรับสิ่งนั้น

— Oriol

นั่นคือเรื่องจริง ตารางภายในตาราง นอกจากนี้ฉันค้นพบทรีแมปที่ซูมได้ซึ่งอนุญาตให้มี json ซ้อนกัน

— Janac Meena

ฟังก์ชั่นเดียวกันนี้ แต่ส่งคืนตารางที่หมุนจะสวยงาม

— ndelucca

1

@Shai ใช้ JSON.parse (yourVariable) แล้วส่งไปที่ buldHTMLTable

— xSx

13

คุณสามารถใช้ปลั๊กอิน jQuery jPut แบบธรรมดา

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
แหล่งที่มา

13

ตรวจสอบปลั๊กอิน~~JSON2HTML~~ http://json2html.com/สำหรับ jQuery ช่วยให้คุณระบุการแปลงที่จะแปลงออบเจ็กต์ JSON ของคุณเป็นเทมเพลต HTML ใช้ตัวสร้างบนhttp://json2html.com/เพื่อรับวัตถุการแปลง json สำหรับเทมเพลต html ที่ต้องการ ในกรณีของคุณมันจะเป็นตารางที่มีแถวที่มีการแปลงตามหลัง

ตัวอย่าง:

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

— ชาด
แหล่งที่มา

คิดว่าฉันจะอัปเดตลิงก์ที่นี่เป็นjson2html.com

— Chad Brown