Как отобразить эти JSON данные в таблице данных? - PullRequest
Новая
       1

Как отобразить эти JSON данные в таблице данных?

0 голосов
/ 06 марта 2020

У меня проблема с отображением моего json объекта внутри таблицы с использованием плагина DataTables.

Это мой 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 объекта.

Я действительно новичок в этом, и я был бы признателен за некоторую помощь. Спасибо тебе.

1 Ответ

0 голосов
/ 06 марта 2020

В вашей строке json есть ошибка: скопируйте и вставьте ее здесь , затем нажмите "Подтвердить", чтобы просмотреть ее.

Решение действительно простое: l oop внутри вашего 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...