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."
}

Solution

Turns out $getJSON only accepts valid api URLs.

I created an api URL for the data.

Then changed 'example.json' in $getJSON to 'http://localhost:3000/apiURL'.

It worked!

Here's the working code:

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('http://localhost:3000/apiURL', 
                        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>

Also added [ ] to json file to make it iterable.

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