Konvertieren Sie json-Daten in eine HTML-Tabelle [closed]

Lesezeit: 5 Minuten

Konvertieren Sie json Daten in eine HTML Tabelle closed
Manisch Mulani

Gibt es eine jQuery- oder Javascript-Bibliothek, die eine dynamische Tabelle mit JSON-Daten generiert? Ich möchte die Spalten nicht definieren, die Bibliothek sollte die Schlüssel im JSON-Hash lesen und Spalten generieren.

Natürlich kann ich selbst durch die JSON-Daten iterieren und die HTML-Tabelle generieren. Ich möchte nur wissen, ob eine solche Bibliothek existiert, die ich einfach wiederverwenden kann.

Konvertieren Sie json Daten in eine HTML Tabelle closed
Manisch Mulani

Danke allen für eure Antworten. Ich habe selbst einen geschrieben. Bitte beachten Sie, dass dies jQuery verwendet.

Code-Auszug:

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>

  • Hallo @Manish-mulani, das hat bei mir nicht funktioniert, könntest du es noch einmal überprüfen

    – Nee

    28. März 2013 um 0:22 Uhr

  • @Nish Hast du nachgesehen jsfiddle.net/manishmmulani/7MRx6

    – Manisch Mulani

    25. April 2013 um 7:13 Uhr

  • Hallo, ich habe versucht, die Daten von einer URL abzurufen, aber es scheint nicht zu funktionieren

    Benutzer4542931

    24. Juni 2015 um 16:52 Uhr

  • Hallo. Dieser funktioniert für mich. Allerdings habe ich eine Frage. Warum gibt es keine Öffnung tr und td Stichworte? Danke.

    – Zyval

    10. Januar 2016 um 23:58 Uhr

  • function addAllColumnHeaders(myList) – ist falsch. sollte sein function addAllColumnHeaders(myList,selector). Übrigens funktioniert das perfekt!!

    – Drückeberger

    21. März 2016 um 4:17 Uhr

1646316727 711 Konvertieren Sie json Daten in eine HTML Tabelle closed
Oriol

Ich habe Ihren Code in Vanilla-js umgeschrieben und DOM-Methoden verwendet, um die HTML-Injektion zu verhindern.

Demo

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"
  }
]));

  • Ist es möglich, dies mit einem verschachtelten JSON-Objekt zum Laufen zu bringen?

    – Janac Meena

    10. August 2016 um 18:49 Uhr

  • @JanacMeena Ich denke, dafür bräuchten Sie n-dimensionale Tabellen.

    – Oriol

    10. August 2016 um 18:53 Uhr

  • Das ist richtig. Tabellen in Tabellen. Außerdem habe ich zoombare Treemaps entdeckt, die verschachtelte JSONs ermöglichen

    – Janac Meena

    11. August 2016 um 15:20 Uhr

  • Die gleiche Funktion, aber die Rückgabe einer Pivot-Tabelle, wäre schön

    – ndelucca

    8. November 2017 um 18:12 Uhr

  • @Shai verwendet JSON.parse(yourVariable) und sendet es an buldHTMLTable

    – xSx

    17. Dezember 2018 um 11:05 Uhr


1646316727 754 Konvertieren Sie json Daten in eine HTML Tabelle closed
Tschad

Kasse JSON2HTML http://json2html.com/ Plugin für jQuery. Sie können damit eine Transformation angeben, die Ihr JSON-Objekt in eine HTML-Vorlage umwandelt. Verwenden Sie Builder auf http://json2html.com/ um ein JSON-Transformationsobjekt für jede gewünschte HTML-Vorlage zu erhalten. In Ihrem Fall wäre es eine Tabelle mit einer Zeile mit folgender Transformation.

Beispiel:

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));

  • Ich dachte, ich würde den Link hier aktualisieren json2html.com

    – Chad Brown

    28. Dezember 2012 um 4:50 Uhr

  • Du brauchst Verknüpfung node-json2html, um auf der Serverseite von NodeJS zu arbeiten

    – Saad Tahir

    22. September 2020 um 8:43 Uhr

Konvertieren Sie json Daten in eine HTML Tabelle closed
Schäber

Sie können das einfache jQuery jPut-Plugin verwenden

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>

924190cookie-checkKonvertieren Sie json-Daten in eine HTML-Tabelle [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy