Чи дійсно є простий спосіб взяти масив об’єктів JSON і перетворити його в таблицю HTML, за винятком кількох полів? Або мені доведеться робити це вручну?
Чи дійсно є простий спосіб взяти масив об’єктів JSON і перетворити його в таблицю HTML, за винятком кількох полів? Або мені доведеться робити це вручну?
Відповіді:
Я не впевнений, що це вам потрібно, але є jqGrid . Він може отримати JSON і створити сітку.
Використання jQuery зробить це простішим.
Наступний код буде приймати масив масивів і зберігати, перетворювати їх у рядки та комірки.
$.getJSON(url , function(data) {
var tbl_body = "";
var odd_even = false;
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
});
tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
odd_even = !odd_even;
});
$("#target_table_id tbody").html(tbl_body);
});
Ви можете додати перевірку на ключі, які ви хочете виключити, додавши щось на зразок
var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
на початку функції зворотного виклику getJSON і додавши:
if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}
навколо рядка tbl_row + =.
Редагувати: раніше призначав нульову змінну
Edit: Версія на основі Timmmm «s ін'єкції вільного вкладу.
$.getJSON(url , function(data) {
var tbl_body = document.createElement("tbody");
var odd_even = false;
$.each(data, function() {
var tbl_row = tbl_body.insertRow();
tbl_row.className = odd_even ? "odd" : "even";
$.each(this, function(k , v) {
var cell = tbl_row.insertCell();
cell.appendChild(document.createTextNode(v.toString()));
});
odd_even = !odd_even;
});
$("#target_table_id").append(tbl_body); //DOM table doesn't have .appendChild
});
<tr>
чергувався клас із парним чи непарним?
Створіть таблицю HTML з масиву об'єктів JSON, розширивши $, як показано нижче
$.makeTable = function (mydata) {
var table = $('<table border=1>');
var tblHeader = "<tr>";
for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
tblHeader += "</tr>";
$(tblHeader).appendTo(table);
$.each(mydata, function (index, value) {
var TableRow = "<tr>";
$.each(value, function (key, val) {
TableRow += "<td>" + val + "</td>";
});
TableRow += "</tr>";
$(table).append(TableRow);
});
return ($(table));
};
і використовувати наступне:
var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");
де TableCont - це деякий div
Чистий HTML-спосіб, не вразливий, як інші AFAIK:
// Function to create a table as a child of el.
// data must be an array of arrays (outer array is rows).
function tableCreate(el, data)
{
var tbl = document.createElement("table");
tbl.style.width = "70%";
for (var i = 0; i < data.length; ++i)
{
var tr = tbl.insertRow();
for(var j = 0; j < data[i].length; ++j)
{
var td = tr.insertCell();
td.appendChild(document.createTextNode(data[i][j].toString()));
}
}
el.appendChild(tbl);
}
Приклад використання:
$.post("/whatever", { somedata: "test" }, null, "json")
.done(function(data) {
rows = [];
for (var i = 0; i < data.Results.length; ++i)
{
cells = [];
cells.push(data.Results[i].A);
cells.push(data.Results[i].B);
rows.push(cells);
}
tableCreate($("#results")[0], rows);
});
Щоб перетворити 2D-масив JavaScript у таблицю HTML, вам дійсно потрібен лише трохи коду:
function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}
$('body').append(arrayToTable([
["John","Slegers",34],
["Tom","Stevens",25],
["An","Davies",28],
["Miet","Hansen",42],
["Eli","Morris",18]
]));
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Якщо ви хочете завантажити свій 2D-масив із файлу JSON, вам також знадобиться трохи коду Ajax:
$.ajax({
type: "GET",
url: "data.json",
dataType: 'json',
success: function (data) {
$('body').append(arrayToTable(data));
}
});
Для дуже просунутих об’єктів JSON до таблиць HTML ви можете спробувати My jQuery Solution, яке базується на цьому закритому потоці .
var myList=[{"name": "abc","age": 50},{"name": {"1": "piet","2": "jan","3": "klaas"},"age": "25","hobby": "watching tv"},{"name": "xyz","hobby": "programming","subtable": [{"a": "a","b": "b"},{"a": "a","b": "b"}]}];
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
addTable(myList, $("#excelDataTable"));
}
function addTable(list, appendObj) {
var columns = addAllColumnHeaders(list, appendObj);
for (var i = 0; i < list.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = list[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
if (cellValue.constructor === Array)
{
$a = $('<td/>');
row$.append($a);
addTable(cellValue, $a);
} else if (cellValue.constructor === Object)
{
var array = $.map(cellValue, function (value, index) {
return [value];
});
$a = $('<td/>');
row$.append($a);
addObject(array, $a);
} else {
row$.append($('<td/>').html(cellValue));
}
}
appendObj.append(row$);
}
}
function addObject(list, appendObj) {
for (var i = 0; i < list.length; i++) {
var row$ = $('<tr/>');
var cellValue = list[i];
if (cellValue == null) {
cellValue = "";
}
if (cellValue.constructor === Array)
{
$a = $('<td/>');
row$.append($a);
addTable(cellValue, $a);
} else if (cellValue.constructor === Object)
{
var array = $.map(cellValue, function (value, index) {
return [value];
});
$a = $('<td/>');
row$.append($a);
addObject(array, $a);
} else {
row$.append($('<td/>').html(cellValue));
}
appendObj.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(list, appendObj)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var rowHash = list[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
appendObj.append(headerTr$);
return columnSet;
}
Для заповнення таблиці ви можете використовувати плагін jQuery, який приймає дані JSON. jsonTable
Тут я знайшов дублікат: Перетворити дані json у таблицю html
Ну, існує багато плагінів, у тому числі комерційний (Зробити це комерційним проектом ?! Нещо переборщили ... але ви можете замовити тут: https://github.com/alfajango/jquery-dynatable )
У цього є більше форка: https://github.com/afshinm/Json-to-HTML-Table
//Example data, Object
var objectArray = [{
"Total": "34",
"Version": "1.0.4",
"Office": "New York"
}, {
"Total": "67",
"Version": "1.1.0",
"Office": "Paris"
}];
//Example data, Array
var stringArray = ["New York", "Berlin", "Paris", "Marrakech", "Moscow"];
//Example data, nested Object. This data will create nested table also.
var nestedTable = [{
key1: "val1",
key2: "val2",
key3: {
tableId: "tblIdNested1",
tableClassName: "clsNested",
linkText: "Download",
data: [{
subkey1: "subval1",
subkey2: "subval2",
subkey3: "subval3"
}]
}
}];
Застосувати код
//Only first parameter is required
var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');
Або ви також можете перевірити ці плагіни jQuery: https://github.com/jongha/jquery-jsontotable
Я думаю, плагіни jongha простіші у використанні
<div id="jsontotable" class="jsontotable"></div>
var data = [[1, 2, 3], [1, 2, 3]];
$.jsontotable(data, { id: '#jsontotable', header: false });
Якщо ви приймаєте використання іншого залежного від jQuery інструменту, я рекомендую використовувати табулятор . Тоді вам не потрібно буде писати HTML або будь-який інший генеруючий код DOM, зберігаючи при цьому велику гнучкість щодо форматування та обробки даних таблиці.
Для іншого робочого прикладу з використанням Node ви можете переглянути демонстраційний проект MMM-Tabulator .
з чистим jquery:
window.jQuery.ajax({
type: "POST",
url: ajaxUrl,
contentType: 'application/json',
success: function (data) {
var odd_even = false;
var response = JSON.parse(data);
var head = "<thead class='thead-inverse'><tr>";
$.each(response[0], function (k, v) {
head = head + "<th scope='row'>" + k.toString() + "</th>";
})
head = head + "</thead></tr>";
$(table).append(head);//append header
var body="<tbody><tr>";
$.each(response, function () {
body=body+"<tr>";
$.each(this, function (k, v) {
body=body +"<td>"+v.toString()+"</td>";
})
body=body+"</tr>";
})
body=body +"</tbody>";
$(table).append(body);//append body
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responsetext);
}
});
Ви можете зробити це досить легко за допомогою Javascript + Jquery, як показано нижче. Якщо ви хочете виключити якийсь стовпець, просто напишіть оператор if всередині циклів for, щоб пропустити ці стовпці. Сподіваюся, це допомагає!
//Sample JSON 2D array
var json = [{
"Total": "34",
"Version": "1.0.4",
"Office": "New York"
}, {
"Total": "67",
"Version": "1.1.0",
"Office": "Paris"
}];
// Get Table headers and print
for (var k = 0; k < Object.keys(json[0]).length; k++) {
$('#table_head').append('<td>' + Object.keys(json[0])[k] + '</td>');
}
// Get table body and print
for (var i = 0; i < Object.keys(json).length; i++) {
$('#table_content').append('<tr>');
for (var j = 0; j < Object.keys(json[0]).length; j++) {
$('#table_content').append('<td>' + json[i][Object.keys(json[0])[j]] + '</td>');
}
$('#table_content').append('</tr>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr id="table_head">
</tr>
</thead>
<tbody id="table_content">
</tbody>
</table>
Один простий спосіб зробити це:
var data = [{
"Total": 34,
"Version": "1.0.4",
"Office": "New York"
}, {
"Total": 67,
"Version": "1.1.0",
"Office": "Paris"
}];
drawTable(data);
function drawTable(data) {
// Get Table headers and print
var head = $("<tr />")
$("#DataTable").append(head);
for (var j = 0; j < Object.keys(data[0]).length; j++) {
head.append($("<th>" + Object.keys(data[0])[j] + "</th>"));
}
// Print the content of rows in DataTable
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#DataTable").append(row);
row.append($("<td>" + rowData["Total"] + "</td>"));
row.append($("<td>" + rowData["Version"] + "</td>"));
row.append($("<td>" + rowData["Office"] + "</td>"));
}
table {
border: 1px solid #666;
width: 100%;
text-align: center;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DataTable"></table>
Змінено бітовий код коду @ Dr.sai. Сподіваюся, це буде корисним.
(function ($) {
/**
* data - array of record
* hidecolumns, array of fields to hide
* usage : $("selector").generateTable(json, ['field1', 'field5']);
*/
'use strict';
$.fn.generateTable = function (data, hidecolumns) {
if ($.isArray(data) === false) {
console.log('Invalid Data');
return;
}
var container = $(this),
table = $('<table>'),
tableHead = $('<thead>'),
tableBody = $('<tbody>'),
tblHeaderRow = $('<tr>');
$.each(data, function (index, value) {
var tableRow = $('<tr>').addClass(index%2 === 0 ? 'even' : 'odd');
$.each(value, function (key, val) {
if (index == 0 && $.inArray(key, hidecolumns) <= -1 ) {
var theaddata = $('<th>').text(key);
tblHeaderRow.append(theaddata);
}
if ($.inArray(key, hidecolumns) <= -1 ) {
var tbodydata = $('<td>').text(val);
tableRow.append(tbodydata);
}
});
$(tableBody).append(tableRow);
});
$(tblHeaderRow).appendTo(tableHead);
tableHead.appendTo(table);
tableBody.appendTo(table);
$(this).append(table);
return this;
};
})(jQuery);
Сподіваючись, це також допоможе приховати деякі стовпці. Посилання на файл
Поворотний однорядковий вигляд із заголовками ліворуч на основі відповіді @ Dr.sai вище.
Ін'єкцію запобігає метод .text jQuery
$.makeTable = function (mydata) {
var table = $('<table>');
$.each(mydata, function (index, value) {
// console.log('index '+index+' value '+value);
$(table).append($('<tr>'));
$(table).append($('<th>').text(index));
$(table).append($('<td>').text(value));
});
return ($(table));
};
Ще коротший шлях
$.makeTable = function (mydata) {
if (mydata.length <= 0) return "";
return $('<table border=1>').append("<tr>" + $.map(mydata[0], function (val, key) {
return "<th>" + key + "</th>";
}).join("\n") + "</tr>").append($.map(mydata, function (index, value) {
return "<tr>" + $.map(index, function (val, key) {
return "<td>" + val + "</td>";
}).join("\n") + "</tr>";
}).join("\n"));
};