How could I read the json file correctly?

Question

I'm trying to read the following json file following an ajax call. The json file should be the result of a php page that produces it and sends it to an html page that receives it and shows it in a table always with ajax. Considering that it's an exercise to learn how to use ajax, I don't really have a php page like that but I simply use the "Live Server" extension on VsCode to read the json file. My question is how could I read the json file and put it in a html table?

Json file:

{
    "employees": [
        {
            "id":1,
            "name":"name1",
            "surname":"surname1",
            "salary":10000
        },

        {
            "id":2,
            "name":"name2",
            "surname":"surname2",
            "salary":2000
        },

        {
            "id":3,
            "name":"name3",
            "surname":"surname3",
            "salary":2000
        },

        {
            "id":4,
            "name":"name4",
            "surname":"surname4",
            "salary":2000
        }
    ]
}

html file:

<!DOCTYPE html>
<html>
        <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <head>
        <title>Test JSON</title>
    </head>

    <body>
        <div>
            <table id="content">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SURNAME</th>
                        <th>SALARY</th>
                    </tr>
                </thead>

                <tbody id="emp">
                </tbody>
            </table>
        </div>

        <script type="text/javascript">
            $.ajax({
                url: "output.json",
                type:"GET",
                dataType:"json",
                success: function (data) {
                    var json = JSON.parse(data.d);
                    $(json).each(function (index, item){
                        ID = json[index].id;
                        NAME = json[index].name;
                        SURNAME = json[index].surname;
                        SALARY = json[index].salary;
                        $('tbody#emp').append(
                            '<tr>' +
                                '<td>' + ID + '</td>' + 
                                '<td>' + NAME+ '</td>' + 
                                '<td>' + SURNAME+ '</td>' + 
                                '<td>' + SALARY + '</td>' + 
                            '</tr>'          
                        )
                    });  
                    
                },
                error: function (data) { alert("help"); }
            });
        </script>
    </body>
</html>

The final result should be an html table like this:

ID	NAME	SURNAME	SALARY
1	name1	surname1	10000
2	name2	surname2	2000
3	name3	surname3	2000
4	name3	surname4	2000

**Thanks in advance **

UPDATE: it gives me an error at line 32 or at the following line

SALARY = json[index].salary;

the error is as follows

Welcome to Stack Overflow! In what way is your code not working as expected? Please elaborate on the specific problem you are observing and what debugging you have done. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Jan 14 '23 at 13:58
Welcome.... my opinion is to go with a library that already does this for you.(https://tabulator.info/): Yout teacher may not like it, but if he didn't forbade this, just take the easy way. — DDS, Jan 14 '23 at 14:03
@David thanks for the welcome. I was mostly looking for a working idea on how to read this json since I'm learning ajax and json reading as described in my question. — programmer1, Jan 14 '23 at 14:08
@DDS more than a shortcut since it's an exercise to learn I would need some idea or working code because I'm not very familiar with ajax and json at the moment. Thanks for the idea anyway — programmer1, Jan 14 '23 at 14:09
@programmer1: Well, one "working idea" would be to make an AJAX request to fetch the JSON data, then in response to that request you could loop through the data and append rows to the HTML table. It looks like you have code which attempts to do exactly that. Have you tried testing it? — David, Jan 14 '23 at 14:11
@Davide: I tried to test it but it gives me an error in the line of code inside ajax at the following line: SALARY = json[index].salary; — programmer1, Jan 14 '23 at 14:15
@programmer1: Have you tried reading the error message? Again... In what way is your code not working as expected? Please elaborate on the specific problem you are observing and what debugging you have done. This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? — David, Jan 14 '23 at 14:17
@programmer1: Then the error is telling you that `data.d` is `undefined`. When you debug, what specifically does `data` contain? Why specifically do you expect a property called `d`? — David, Jan 14 '23 at 14:25

score 1 · Accepted Answer · edited Jan 14 '23 at 14:31

The AJAX returns a parsed object, so when you try to parse it with JSON.parse(data.d) it fails.

Also it seems you forgot the array you want to display is under the employees key.

Here's the corrected version of the success callback:

success: function (data) {
  var employees = data.employees;
  $(obj).each(function (index, item) {
    ID = employees[index].id;
    NAME = employees[index].name;
    SURNAME = employees[index].surname;
    SALARY = employees[index].salary;
    $('tbody#emp').append(
      '<tr>' +
      '<td>' + ID + '</td>' +
      '<td>' + NAME + '</td>' +
      '<td>' + SURNAME + '</td>' +
      '<td>' + SALARY + '</td>' +
      '</tr>'
    )
  });
}

How could I read the json file correctly?

1 Answers1