एक HTML तालिका में json डेटा परिवर्तित करें [बंद]

112

बन्द है। यह प्रश्न स्टैक ओवरफ्लो दिशानिर्देशों को पूरा नहीं करता है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? सवाल को अपडेट करें ताकि यह स्टैक ओवरफ्लो के लिए विषय पर हो ।

6 साल पहले बंद हुआ ।

क्या कोई jQuery या जावास्क्रिप्ट लाइब्रेरी है जो एक डायनामिक टेबल दिया गया है जो कि जसन डेटा है? मैं स्तंभों को परिभाषित नहीं करना चाहता, पुस्तकालय को json हैश में कुंजियों को पढ़ना चाहिए और स्तंभों को उत्पन्न करना चाहिए।

बेशक, मैं खुद को json डेटा के माध्यम से पुनरावृत्त कर सकता हूं और html तालिका उत्पन्न कर सकता हूं। मैं बस यह जानना चाहता हूं कि क्या कोई ऐसी लाइब्रेरी मौजूद है, जिसका मैं केवल पुन: उपयोग कर सकता हूं।

— मनीष मुलानी
स्रोत

मुझे लगता है कि trirand.com/blog वही है जो आप ढूंढ रहे हैं। यह JSON लेता है और इसे ग्रिड में परिवर्तित करता है।

— गोकुल एनके

1

खैर, उत्तर के लिए धन्यवाद। लेकिन अपनी आवश्यकताओं को पूरा करने के लिए मैंने अपने लिए एक लिखा। jsfiddle.net/manishmmulani/7MRx6

— मनीष मुलानी

2

आप गितुब पर इस सरल परियोजना का उपयोग भी कर सकते हैं: Json-To-HTML-Table

— अफशीन मेहरबानी १३'११:

2020 में अधिक आसानी से, सिर्फ github.com/arters/Convert-json-data-to-a-html-template

— 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>

स्निपेट का विस्तार करें

— मनीष मुलानी
स्रोत

हाय @ मनीष-मुलानी यह मेरे काम नहीं आया, आप फिर से जाँच कर सकते हैं

— निश

1

@ नीश क्या आपने jsfiddle.net/manishmmulani/7MRx6 की

— मनीष मुलानी

1

नमस्ते, मैं एक यूआरएल से डेटा प्राप्त करने की कोशिश की, लेकिन यह काम करने के लिए प्रतीत नहीं होता है

3

नमस्ते। यह मेरे लिए काम करता है। हालांकि मेरा एक सवाल है। कोई उद्घाटन trऔर tdटैग क्यों नहीं है ? धन्यवाद।

— साइवल

function addAllColumnHeaders(myList)- गलत है। होना चाहिए function addAllColumnHeaders(myList,selector)। BTW यह सही काम करता है !!

— शिर्कर

61

मैंने html injection को रोकने के लिए 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"
  }
]));

स्निपेट का विस्तार करें

— Oriol
स्रोत

1

क्या नेस्टेड जोंस ऑब्जेक्ट के साथ यह काम करना संभव है?

— जनक मीणा

@JanacMeena मुझे लगता है कि आपको इसके लिए n- आयामी तालिकाओं की आवश्यकता होगी।

— ओरोल

यह सच है। तालिकाओं के भीतर तालिकाओं। इसके अलावा, मैंने जूम करने योग्य ट्रेपैप की खोज की, जो नेस्टेड

— जोंस के

यह एक ही कार्य है लेकिन एक

— पिवोट

1

@ शाई JSON.parse (yourVariable) का उपयोग करें और इसे buldHTMLTable पर भेजें

— 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

की जाँच करें ~~JSON2HTML~~ http://json2html.com/ jQuery के लिए प्लगइन। यह आपको एक रूपांतरण निर्दिष्ट करने की अनुमति देता है जो आपके JSON ऑब्जेक्ट को HTML टेम्पलेट में बदल देगा। किसी भी वांछित HTML टेम्पलेट के लिए json ट्रांसफ़ॉर्म ऑब्जेक्ट प्राप्त करने के लिए 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));

— काग़ज़ का टुकड़ा
स्रोत

मुझे लगा कि मैं यहां लिंक को अपडेट करूंगा json2html.com

— चाड ब्राउन