Return values from an API in a JSON array

Question

I have this website that calls data from the API, renders the data in a table but every single cell returns undefined.

The data in the API is inside an array like [] but the there are multiple data sets with {} inside them which I'm not sure how to define in JavaScript. How would I fix this?

This is the link to the API from where I wish to render the data. Here is an example of this data:

[
    {
        "id": "40129",
        "employee_name": "EllakZa",
        "employee_salary": "56106",
        "employee_age": "311",
        "profile_image": ""
    },
    {
        "id": "40212",
        "employee_name": "Amit Negi111",
        "employee_salary": "123456",
        "employee_age": "44",
        "profile_image": ""
    }
]

My code follows:

$(document).ready(function(){
        $.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data){
            var employeeData = '[]';
            console.log(data);
            $.each(data, function({key, value}){
                employeeData += '<tr>';
                employeeData += '<td>'+data.id+'</td>';
                employeeData += '<td>'+data.employee_name+'</td>';
                employeeData += '<td>'+data.employee_salary+'</td>';
                employeeData += '<td>'+data.employee_age+'</td>';
                employeeData += '<td>'+data.profile_image+'</td>';
                employeeData += '<tr>';
            });
            $('#tracerouteTable').append(employeeData);
        });
    });

Answer 1

Do like this:

$(document).ready(function(){
        $.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data){
            var employeeData = '';
            console.log(data);
            $.each(data, function(key, value){
                employeeData += '<tr>';
                employeeData += '<td>'+value.id+'</td>';
                employeeData += '<td>'+value.employee_name+'</td>';
                employeeData += '<td>'+value.employee_salary+'</td>';
                employeeData += '<td>'+value.employee_age+'</td>';
                employeeData += '<td>'+value.profile_image+'</td>';
                employeeData += '<tr>';
            });
            $('#tracerouteTable').append(employeeData);
        });
    });

To know more about jquery each follow this link

Answer 2

'data' is the the array returned from the api, so 'data.id' is undefined. You need to access the properties of each object within the array, so iterate over the array und use each item for accessing the properties.

use

data.forEach((item) => {
  employeeData += '<tr>';
  employeeData += '<td>'+item.id+'</td>';
  employeeData += '<td>'+item.employee_name+'</td>';
  employeeData += '<td>'+item.employee_salary+'</td>';
  employeeData += '<td>'+item.employee_age+'</td>';
  employeeData += '<td>'+item.profile_image+'</td>';
  employeeData += '<tr>';
});

instead.

Answer 3

Data is an array of JSON objects. So in your code key is the index of the current JSON object and value is the current JSON object.

Access the data inside the JSON object like this:

$.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data){   
    console.log(data);
    $.each(data, function({key, value}){
        var employeeData = '';

        employeeData += '<tr>';
        employeeData += '<td>' + value.id + '</td>';
        employeeData += '<td>' + value.employee_name + '</td>';
        employeeData += '<td>' + value.employee_salary + '</td>';
        employeeData += '<td>' + value.employee_age + '</td>';
        employeeData += '<td>' + value.profile_image + '</td>';
        employeeData += '<tr>';


        $('#tracerouteTable').append(employeeData);
    });
});