Wie kann ich ein json-array in eine html-tabelle konvertieren?

1 Antwort

tilorus31
08.02.2023, 21:32

Hier ist ein einfaches Beispiel, wie man das in JavaScript machen kann:

<html>
  <head>
    <script>
      function convertToTable(jsonArray) {
        var table = "<table border='1' cellspacing='0' cellpadding='5'>";
        var header = "<tr>";

        // Überprüfe, ob das Array mindestens ein Element hat
        if (jsonArray.length > 0) {
          // Überprüfe, welche Felder das erste Objekt im Array hat
          for (var field in jsonArray[0]) {
            header += "<th>" + field + "</th>";
          }
          header += "</tr>";

          // Durchlaufe jedes Objekt im Array und füge es als Zeile in die Tabelle ein
          for (var i = 0; i < jsonArray.length; i++) {
            var row = "<tr>";
            for (var field in jsonArray[i]) {
              row += "<td>" + jsonArray[i][field] + "</td>";
            }
            row += "</tr>";
            table += row;
          }
        }

        table += "</table>";
        return table;
      }
    </script>
  </head>
  <body>
    <div id="tableContainer"></div>
    <script>
      var jsonArray = [
        {"Name": "John Doe", "Age": 32, "City": "New York"},
        {"Name": "Jane Doe", "Age": 28, "City": "London"},
        {"Name": "Jim Brown", "Age": 41, "City": "Paris"}
      ];
      document.getElementById("tableContainer").innerHTML = convertToTable(jsonArray);
    </script>
  </body>
</html>
Woher ich das weiß:Hobby