时间戳

首页 > 解决方案 > 如何在数据表中显示此 JSON 数据？

jquery - 如何在数据表中显示此 JSON 数据？

问题描述

我在使用DataTables插件在表中显示我的 json 对象时遇到问题。

这是我的 json 对象：

{
   "data":[
      {
         "attributes":{
            "siteID":"0002"
         },
         "date":{
            "attributes":{
               "dateValue":"20200304"
            },
            "traffic":[
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"000000"
                  }
               },
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"010000"
                  }
               },
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"020000"
                  }
               },
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"030000"
                  }
               }
            ]
         }
      },
      {
         "attributes":{
            "siteID":"0004"
         },
         "date":{
            "attributes":{
               "dateValue":"20200304"
            },
            "traffic":[
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"000000"
                  }
               },
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"010000"
                  }
               },
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"040000"
                  }
               },
               {
                  "attributes":{
                     "code":"01",
                     "exits":"0",
                     "enters":"0",
                     "startTime":"030000"
                  }
               }
            ]
         }
      }
   ]
}

我确实手动添加了表格行，它工作正常：这是结果的屏幕截图。但我希望表体将使用我的 json 对象动态创建。

我对此真的很陌生，我将不胜感激。谢谢你。

标签： jqueryhtmljsondatatables

解决方案

您的 json 字符串中有错误：将其复制粘贴到此处，然后单击验证以查看它。

解决方案非常简单：在 json 对象中循环以动态创建表格行tr和单元格，然后在每次迭代后将td它们附加到：tbody

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <title>DataTables</title>
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Site Id</th>
                <th>Date</th>
                <th>Start Time</th>
                <th>Code</th>
                <th>Enters</th>
                <th>Exists</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>Site Id</th>
                <th>Date</th>
                <th>Start Time</th>
                <th>Code</th>
                <th>Enters</th>
                <th>Exists</th>
            </tr>
        </tfoot>
    </table>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script>
        $(window).on("load", function () {
            // Your json string
            var data = '{"data":[{"attributes":{"siteID":"0002"},"date":{"attributes":{"dateValue":"20200304"},"traffic":[{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"000000"}},{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"010000"}},{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"020000"}},{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"030000"}}]}},{"attributes":{"siteID":"0004"},"date":{"attributes":{"dateValue":"20200304"},"traffic":[{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"000000"}},{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"010000"}},{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"040000"}},{"attributes":{"code":"01","exits":"0","enters":"0","startTime":"030000"}}]}}]}';

            // Convert the json string to object
            var jsonArray = JSON.parse(data).data;

            $.each(jsonArray, function (index, jsonObject) {
                var traffic = jsonObject.date.traffic;

                $.each(traffic, function (index, trafficObject) {
                    // Loop to create table rows
                    var tr = document.createElement('tr');

                    var siteId = document.createElement('td');
                    siteId.appendChild(document.createTextNode(jsonObject.attributes.siteID));
                    tr.appendChild(siteId);

                    var dateTd = document.createElement('td');
                    dateTd.appendChild(document.createTextNode(jsonObject.date.attributes.dateValue));
                    tr.appendChild(dateTd);

                    var startTime = document.createElement('td');
                    startTime.appendChild(document.createTextNode(trafficObject.attributes.startTime));
                    tr.appendChild(startTime);

                    var code = document.createElement('td');
                    code.appendChild(document.createTextNode(trafficObject.attributes.code));
                    tr.appendChild(code);

                    var enters = document.createElement('td');
                    enters.appendChild(document.createTextNode(trafficObject.attributes.enters));
                    tr.appendChild(enters);

                    var exits = document.createElement('td');
                    exits.appendChild(document.createTextNode(trafficObject.attributes.exits));
                    tr.appendChild(exits);

                    // Append the row to the `<tbody>` tag
                    document.getElementsByTagName('tbody')[0].appendChild(tr);
                });
            });
        });

        $(document).ready(function () {
            // DataTable will be executed once the table is loaded
            $('#example').DataTable();
        });
    </script>
</body>
</html>

推荐阅读