क्या कोई jQuery या जावास्क्रिप्ट लाइब्रेरी है जो जेसन डेटा दिए गए गतिशील तालिका उत्पन्न करती है? मैं कॉलम को परिभाषित नहीं करना चाहता, पुस्तकालय को जेसन हैश में कुंजी पढ़नी चाहिए और कॉलम जेनरेट करना चाहिए।जेसन डेटा को एक HTML तालिका में कनवर्ट करें
बेशक, मैं खुद जेसन डेटा के माध्यम से पुन: प्रयास कर सकता हूं और HTML तालिका उत्पन्न कर सकता हूं। मैं सिर्फ यह जानना चाहता हूं कि ऐसी कोई पुस्तकालय मौजूद है जिसे मैं आसानी से पुन: उपयोग कर सकता हूं।
अपने सभी उत्तरों के लिए धन्यवाद। I wrote one myself. कृपया ध्यान दें कि यह 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>हाय @ मनीष-मुलानी यह मेरे लिए काम नहीं करता है, क्या आप फिर से जांच सकते हैं – Nish
@Nish क्या आपने http://jsfiddle.net/manishmmulani/ को चेक किया था 7MRx6 –
हाय, मैंने यूआरएल से डेटा प्राप्त करने का प्रयास किया, लेकिन ऐसा लगता है कि –
jQuery के लिए JSON2HTMLhttp://json2html.com/ प्लगइन देखें। यह आपको एक रूपांतरण निर्दिष्ट करने की अनुमति देता है जो आपके JSON ऑब्जेक्ट को HTML टेम्पलेट में परिवर्तित करेगा। किसी भी वांछित HTML टेम्पलेट के लिए जेसन ट्रांसफॉर्म ऑब्जेक्ट प्राप्त करने के लिए http://json2html.com/ पर बिल्डर का उपयोग करें। आपके मामले में, यह पंक्ति के साथ एक सारणी होगी जिसमें निम्नलिखित परिवर्तन होंगे।
उदाहरण:
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));
लगा कि मैं यहां लिंक को अपडेट करूँगा http://json2html.com –
मैं वेनिला-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;
}
क्या यह काम नेस्टेड जेसन ऑब्जेक्ट के साथ बनाना संभव है? –
@JanacMeena मुझे लगता है कि इसके लिए आपको एन-आयामी तालिकाओं की आवश्यकता होगी। – Oriol
यह सच है। टेबल के भीतर टेबल्स। इसके अलावा, मैंने ज़ूम करने योग्य ट्रेमैप्स की खोज की जो नेस्टेड जेसन –
आप सरल jQuery jPut प्लगइन
http://plugins.jquery.com/jput/
<script>
$(document).ready(function(){
var json = [{"name": "name1","email":"[email protected]"},{"name": "name2","link":"[email protected]"}];
//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>
खैर, उत्तर के लिए धन्यवाद का उपयोग कर सकते हैं। लेकिन मेरी आवश्यकताओं को पूरा करने के लिए मैंने खुद के लिए एक लिखा था। http://jsfiddle.net/manishmmulani/7MRx6/ –
आप गीथूब पर इस सरल प्रोजेक्ट का भी उपयोग कर सकते हैं: [जेसन-टू-एचटीएमएल-टेबल] (https://github.com/afshinm/Json-to-HTML-Table) –
मुझे लगता है कि http://www.trirand.com/blog/ वह है जिसे आप ढूंढ रहे हैं। यह JSON लेता है और इसे ग्रिड में परिवर्तित करता है। –