क्या वास्तव में एक आसान तरीका है कि मैं JSON ऑब्जेक्ट्स की एक सरणी ले सकता हूं और कुछ फ़ील्ड्स को छोड़कर इसे HTML टेबल में बदल सकता हूं? या मैं मैन्युअल रूप से ऐसा करने जा रहा हूं?
JSON सरणी को jQuery में HTML तालिका में बदलें
जवाबों:
मुझे यकीन नहीं है कि यह ऐसा है जो आप चाहते हैं लेकिन jqGrid है । यह JSON प्राप्त कर सकता है और एक ग्रिड बना सकता है।
JqGrid के लिए एक और वोट - वास्तव में लागू करना आसान है, महान प्रलेखन और उदाहरण हैं, और आपके लिए बहुत सारे काम में कटौती करते हैं।
—
पीटर बैली
jqGrid बहुत आशाजनक लग रहा है!
—
चार्ली विएलार्ड 11
ध्यान दें कि jqGrid एक गैर-तुच्छ लाइसेंस लागत के साथ एक व्यावसायिक उत्पाद है।
—
सरल
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 + = लाइन के आसपास।
संपादित करें: पहले एक अशक्त चर असाइन कर रहा था
संपादित करें: के आधार पर संस्करण Timmmm के इंजेक्शन से मुक्त योगदान।
$.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>एक समान या विषम के वर्ग के बीच वैकल्पिक रूप से कैसे लिखूंगा ?
कॉलम का क्रम स्रोत डेटा में दिखाई देने वाले क्रम पर निर्भर करेगा। मैंने ओपी के लिए एक सरल विषम / यहां तक कि अल्टरनेटर में जोड़ा है।
—
अवटैस्टिक
ज्ञात हो कि यह स्क्रिप्ट इंजेक्शन के लिए कमजोर है। यानी उपयोगकर्ता-जनित सामग्री के साथ इसका उपयोग न करें।
—
टिम्मम्म
आपको $ ("# target_table_id") का उपयोग करना चाहिए । परिशिष्ट (tbl_body); $ के बजाय ("# target_table_id")। appendChild (tbl_body); चूंकि jQuery ऑब्जेक्ट केवल एक एपेंड फ़ंक्शन को उजागर करता है।
—
बोर्नटोडकोड
नीचे दिखाए अनुसार $ बढ़ाकर वस्तुओं के JSON सरणी से एक HTML तालिका बनाएं
$.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);
});
HTML तालिका में 2D जावास्क्रिप्ट सरणी परिवर्तित करना
HTML तालिका में 2D जावास्क्रिप्ट सरणी को चालू करने के लिए, आपको वास्तव में कोड की थोड़ी जरूरत है:
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>एक JSON फ़ाइल लोड हो रही है
यदि आप एक JSON फ़ाइल से अपने 2D सरणी को लोड करना चाहते हैं, तो आपको थोड़ी सी Ajax कोड की आवश्यकता होगी:
$.ajax({
type: "GET",
url: "data.json",
dataType: 'json',
success: function (data) {
$('body').append(arrayToTable(data));
}
});
HTML तालिका में बहुत उन्नत JSON ऑब्जेक्ट्स के लिए आप 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;
}
मुझे यहाँ एक डुप्लिकेट मिला: 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
मुझे लगता है कि जोंगा के प्लगइन्स का उपयोग करना आसान है
<div id="jsontotable" class="jsontotable"></div>
var data = [[1, 2, 3], [1, 2, 3]];
$.jsontotable(data, { id: '#jsontotable', header: false });
यदि आप किसी अन्य jQuery निर्भर उपकरण का उपयोग करना स्वीकार करते हैं , तो मैं Tabulator का उपयोग करने की सलाह दूंगा । तब आपको टेबल डेटा के प्रारूपण और प्रसंस्करण के बारे में महान लचीलापन बनाए रखते हुए HTML या किसी अन्य DOM जनरेटिंग कोड को लिखने की आवश्यकता नहीं होगी।
नोड का उपयोग करके एक और काम करने वाले उदाहरण के लिए , आप MMM-Tabulator डेमो प्रोजेक्ट को देख सकते हैं ।
ऐसा करने का एक सरल तरीका है:
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>
ड्रॉ फ़ंक्शन को नीचे के रूप में सामान्य बनाया जा सकता है: फ़ंक्शन ड्रॉ राउर (rowData) {var row = $ ("<tr />") $ ("# DataTable")। परिशिष्ट (पंक्ति); $ .each (rowData, function (k, v) {row.append ($ ("<td>" + v + "</ td>");}); }
—
सुब्रा एम
शुद्ध 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);
}
});
आप इसे नीचे दिए गए जावास्क्रिप्ट + जेकरी के साथ आसानी से कर सकते हैं। यदि आप कुछ कॉलम को छोड़ना चाहते हैं, तो उन कॉलम को छोड़ने के लिए छोरों के अंदर एक इफ स्टेटमेंट लिखें। उम्मीद है की यह मदद करेगा!
//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>@ Drsai के कोड के एक बिट कोड को संशोधित किया। आशा है कि यह उपयोगी होगा।
(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);
यह आशा करना कुछ स्तंभों को छिपाने के लिए भी सहायक होगा। फ़ाइल के लिए लिंक
@ Drsai के ऊपर दिए गए उत्तर के आधार पर बाईं ओर हेडर के साथ एकल-पंक्ति दृश्य पिवोट किया गया।
इंजेक्शन jQuery के .text विधि द्वारा रोका गया
$.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"));
};
HTML / स्क्रिप्ट इंजेक्शन के लिए कमजोर।
—
टिम्मम्म