반응형
json 데이터를 html 테이블로 변환
json data가 주어진 동적 테이블을 생성하는 jQuery 또는 javascript 라이브러리가 있습니까?열을 정의하지 않으려면 라이브러리가 json 해시의 키를 읽고 열을 생성해야 합니다.
물론 json 데이터를 반복하여 html 테이블을 생성할 수 있습니다.나는 단지 내가 간단히 재사용할 수 있는 그런 도서관이 있는지 알고 싶을 뿐이다.
답장 감사합니다.내가 직접 썼어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>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);
var 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"
}
]));간단한 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>
JSON2 확인jQuery용 HTML 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));
언급URL : https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table
반응형
'programing' 카테고리의 다른 글
| 스프링 부트 - 다른 시스템(eureka, zuul, 리본, nginx 등)은 무엇에 사용됩니까? (0) | 2023.03.18 |
|---|---|
| React JS를 사용하여 재료 UI에서 전체 카드 구성 요소를 클릭할 수 있도록 만드는 방법은 무엇입니까? (0) | 2023.03.18 |
| 쿼리 문자열에서 매개 변수 값을 가져오려면 어떻게 해야 합니까? (0) | 2023.03.18 |
| UI 선택에서 수동으로 입력한 텍스트 허용 (0) | 2023.03.18 |
| Python 직렬화 가능 개체 json (0) | 2023.03.18 |