如何获取字典 JSON 数据列表并将其作为表格数据显示在 HTML 页面上?

htmlweb developmentfront end technology更新于 2024/4/22 7:08:17

本文将完成的任务是检索字典 JSON 数据列表并将其作为表格数据显示在 HTML 页面上。让我们深入文章，了解更多关于在 HTML 页面上将 JSON 数据显示为表格数据的信息。

HTML 表格

HTML 表格使用 <table> 标签创建，其中 <tr> 标签用于创建表格行，<td> 标签用于创建数据单元格。<td> 下的元素默认情况下，表格是常规的，并且左对齐。

HTML 表格允许 Web 开发者将文本、图片、链接、其他表格等数据排列到单元格的行和列中。

语法

以下是 HTML 表格的语法 -

<table>…</table>

请参考以下示例，以更好地理解如何在 HTML 页面上将 JSON 数据显示为表格数据。

示例

在下面的示例中，我们运行脚本，将 JSON 数据显示为 HTML 页面上的表格数据。

<!DOCTYPE HTML>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <body style = "background-color:#D5F5E3 ">
      <p id = "tutorial"></p>
      <button onclick = "maketable('#tutorial')">Click</button><br><br>
      <table id="tutorial" border="1"></table>
      <script>
         var element_up = document.getElementById("tutorial");
         var list = [
            { "S.No": "1", "Name": "RajKumar" },
            { "Rank": "23", "Name": "Maya" },
         ];
         element_up.innerHTML = "Click Button To Change JSON Data As A Table Data.<br><br>"
         + JSON.stringify(list[0]) + "<br>"
         + JSON.stringify(list[1]) + "<br>"
         function maketable(selector) {
            var cols = headings(list, selector);
            for (var i = 0; i < list.length; i++) {
               var row = $('<tr/>');
               for (var colIndex = 0; colIndex < cols.length; colIndex++) {
                  var val = list[i][cols[colIndex]];
                  if (val == null) val = "";
                  row.append($('<td/>').html(val));
               }
               $(selector).append(row);
            }
         }
         function headings(list, selector) {
            var columns = [];
            var heading = $('<tr/>');
            for (var i = 0; i < list.length; i++) {
               var row = list[i];
               for (var k in row) {
                  if ($.inArray(k, columns) == -1) {
                     columns.push(k);
                     heading.append($('<th/>').html(k));
                  }
               }
            }
            $(selector).append(heading);
            return columns;
         }
      </script>
   </body>
</html>

脚本执行后，将生成一个包含数据的输出，并在网页上显示一个点击按钮。当用户点击按钮时，事件会被触发，并将 JSON 数据以表格形式显示。

示例

以下示例展示了我们运行脚本，将 JSON 数据以表格形式显示在 HTML 页面上。

<!DOCTYPE HTML>
<html>
   <body style="background-color:#E8DAEF">
   <script>
      document.writeln("<h2>Displaying Json Data As Table Data</h2>");
      var books = { "tutorial" : [{ "Name" : "BMW", "price" : "6Lakh"}, ],
      "tutorial1" : [{ "Name" : "Benz", "price" : "8Lakh" },] }
      var i = 0
      document.writeln("<table border='1'><tr>");
      for(i=0;i<books.tutorial.length;i++) {
         document.writeln("<td>");
         document.writeln("<table border='1'>");
         document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.tutorial[i].Name+"</td></tr>");
         document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.tutorial[i].price +"</td></tr>");
         document.writeln("</table>");
         document.writeln("</td>");
      }
      for(i=0;i<books.tutorial1.length;i++) {
         document.writeln("<td>");
         document.writeln("<table border='1' width=100 >");
         document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.tutorial1[i].Name+"</td></tr>");
         document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.tutorial1[i].price+"</td></tr>");
         document.writeln("</table>");
         document.writeln("</td>");
      }
      document.writeln("</tr></table>");
   </script>
   </body>
</html>

运行上述脚本后，将弹出输出窗口，其中显示的表格数据来自我们在网页上显示的脚本中使用的 JSON 数据。

示例

执行以下代码，观察 JSON 数据在网页上显示的表格数据中是如何显示的。

<!DOCTYPE HTML>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <body onLoad="createtable('#tutorial')">
      <table id="tutorial" border="1"></table>
      <script>
         var data = [
            { "Name": "Aditya", "Age":22 },
            { "Age": 24, "hobby": "Singing" },
            { "Name": "Varsha","Age": 21, "hobby": "Dancing" }
         ];
         function createtable(selector) {
            var columns = headings(data , selector);
            for (var i = 0; i < data .length; i++) {
               var row$ = $('<tr/>');
               for (var colIndex = 0; colIndex < columns.length; colIndex++) {
                  var cellValue = data [i][columns[colIndex]];
                  if (cellValue == null) cellValue = "";
                  row$.append($('<td/>').html(cellValue));
               }
               $(selector).append(row$);
            }
         }
         function headings(data , selector) {
            var columnSet = [];
            var headerTr$ = $('<tr/>');
            for (var i = 0; i <data .length; i++) {
               var rowHash = data [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>
   </body>
</html>

当脚本执行时，事件被触发并显示表格以及从网页上显示的脚本中使用的 JSON 数据中获取的一些数据。