'Problem Fetching and Displaying JSON Data in table using JQuery getJSON

I'm trying to fetch and display data from a JSON file using JQuery method getJSON().

The data is fetched using getJSON and each section of data is displayed as a new row in an html table.

The problem is the data isn't fetched or displayed at all.

The script URLs are fine.

Could you please help me spot the problem in the code.

Thanks in advance!

index.html:


<html lang="en">
<head>
    <title>Displaying JSON Data with Ajax</title>  
    <script src="jquery.js"></script>
</head> 
<body>
    <section>
        <h1>Displaying JSON Data with Ajax</h1>
        <table id='table' width='100%'>
            <tr>
                <th>Network</th>
                <th>power</th>
                <th>Members</th>
                <th>Status</th>
            </tr>
            <script>
                $(document).ready(function () {
                    $.getJSON('example.json', 
                        function (data) {
                        var rows = '';
                        $.each(data, function (key, value) {
                            rows += `
                            <tr>
                            <td> ${data[key].items.key} </td>
                            <td> ${data[key].items.value} </td>
                            <td> ${Object.keys(data[key].items).length} </td>
                            <td> ${Object.keys(data[key].obj).length} </td>
                            </tr>
                            `;
                        });  
                        $('#table').append(rows);
                    });
                });
            </script>
        </table>
    </section>
</body>
</html>

example.json:


{
  "items": [
    {
      "key": "First",
      "value": 100
    },
    {
      "key": "Second",
      "value": false
    },
    {
      "key": "Last",
      "value": "Mixed"
    }
  ],
  "obj": {
    "number": 1.2345e-6,
    "enabled": true
  },
  "message": "Strings have to be in double-quotes."
}
javascripthtmljquerygetjson


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions