json 데이터를 html 테이블로 변환 [닫기]

112

json 데이터가 주어진 동적 테이블을 생성하는 jQuery 또는 JavaScript 라이브러리가 있습니까? 열을 정의하고 싶지 않습니다. 라이브러리는 json 해시의 키를 읽고 열을 생성해야합니다.

물론 json 데이터를 반복하고 html 테이블을 생성 할 수 있습니다. 단순히 재사용 할 수있는 그러한 라이브러리가 있는지 알고 싶습니다.

javascript  html  json  html-table 
— 매니쉬 뮬 라니
소스
나는 trirand.com/blog 가 당신이 찾고있는 것이라고 생각 합니다. JSON을 사용하여 그리드로 변환합니다.
— Gokul NK 2011
1
글쎄, 답장 주셔서 감사합니다. 그러나 내 요구 사항을 충족하기 위해 직접 작성했습니다. jsfiddle.net/manishmmulani/7MRx6
— Manish Mulani 2011 년
2
Github에서이 간단한 프로젝트를 사용할 수도 있습니다. Json-To-HTML-Table
— Afshin Mehrabani
— kkasp

답변:

136

귀하의 답변에 감사드립니다. 내가 직접 썼다. 이것은 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이 나에게 작동하지 않았습니다. 다시 확인할 수 있습니까?
— Nish
1
@Nish 당신은 확인 했나 jsfiddle.net/manishmmulani/7MRx6
— 마니 Mulani
1
안녕하세요, 저는 URL에서 데이터를 얻을려고했는데, 그것은 작동하지 않는 것
3
안녕하세요. 이것은 나를 위해 작동합니다. 그러나 질문이 있습니다. 오프닝 tr과 td태그 가없는 이유는 무엇 입니까? 감사.
— Cyval
function addAllColumnHeaders(myList)-틀렸어. 이어야합니다 function addAllColumnHeaders(myList,selector). BTW 이것은 완벽하게 작동합니다!!
— Shirker
61

HTML 삽입을 방지하기 위해 DOM 메서드를 사용하여 vanilla-js로 코드를 다시 작성했습니다.

데모

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"
  }
]));
스 니펫 확장

— 오리올
소스
1
중첩 된 json 객체로이 작업을 수행 할 수 있습니까?
— Janac Meena
@JanacMeena 나는 당신이 그것을 위해 n 차원 테이블이 필요할 것이라고 생각합니다.
— Oriol
사실입니다. 테이블 내의 테이블. 또한, 나는 중첩 된 JSON 수 있도록 줌이 가능한 트리 맵 발견
— Janac 미나을
이 함수는 동일하지만 피벗 된 테이블을 반환하면 beautifull이됩니다.
— ndelucca 2017
1
JSON.parse (yourVariable)를 사용하고 buldHTMLTable로 보내 @Shai
— 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

jQuery 용 JSON2HTML http://json2html.com/ 플러그인을 확인하십시오 . JSON 개체를 HTML 템플릿으로 변환하는 변환을 지정할 수 있습니다. http://json2html.com/ 에서 빌더를 사용 하여 원하는 HTML 템플릿에 대한 json 변환 개체를 가져옵니다. 귀하의 경우에는 다음과 같은 변환이있는 행이있는 테이블이 될 것입니다.

예: 

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
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.