How to display this JSON data in data table?

Question

I am having a problem displaying my json object inside a table using DataTables plug-in.

This is my json object:

{
   "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"
                  }
               }
            ]
         }
      }
   ]
}

I did add the table rows manually and it works fine: this is a screenshot of the result. But I would like that the table body will be created dynamically using my json object.

I am really new to this and I would appreciate some help. Thakn you.

I used this answer to convert json to table and it worked fine https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table But, you have nested data so it might take some re-working to match your data set — Funk Doc, Mar 06 '20 at 18:07
The JSON in your question is not valid. Try checking it with a validator first (there are various online validators you can use), and then update your question. Also, try to format the JSON so it's easier to read. — andrewJames, Mar 06 '20 at 18:07
Can you show us what you have already tried? And describe the problem(s) you encountered? — andrewJames, Mar 06 '20 at 18:08

score 0 · Accepted Answer · answered Mar 06 '20 at 20:26

You have an error in your json string: copy paste it here then click validate to view it.

The solution is really simple: loop inside your json object to dynamically create table rows tr and cells td then append them to tbody after each iteration:

<!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>

How to display this JSON data in data table?

1 Answers1