Question

我有一个网站，该网站从API调用数据，将数据呈现在表格中，但是每个单元格都返回未定义的内容。

API中的数据位于像[]这样的数组中，但是其中有多个带有{}的数据集，我不确定如何在JavaScript中定义。我该如何解决？

This is the link to the API，我希望从中渲染数据。这是此数据的示例：

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

我的代码如下：

$(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

这样做：

$(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);
        });
    });

要了解有关jquery的更多信息，请遵循以下link

Answer 2

'data'是从api返回的数组，因此'data.id'是未定义的。您需要访问数组中每个对象的属性，因此要遍历数组并使用每个项目来访问属性。

使用

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>';
});

相反。

Answer 3

数据是JSON对象的数组。因此，在您的代码中key是当前JSON对象的索引，而value是当前JSON对象。

像这样访问JSON对象中的数据：

$.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);
    });
});

从JSON数组中的API返回值

3 个答案: