从 API 返回 JSON 数组中的值答案

【问题标题】：Return values from an API in a JSON array从 API 返回 JSON 数组中的值
【发布时间】：2019-07-23 15:44:37
【问题描述】：

我有这个网站，它从 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);
        });
    });

【问题讨论】：

你能显示console.log(data) 显示的内容吗？
为什么employeeData被初始化为包含[]的字符串？其次，data 是集合；它不会有id 和其他属性。出于某种原因，您似乎忽略了key 和value。
不确定function({key, value})
console.log(data) 按顺序显示所有数据数组，employeeData 有 [] 否则当我运行该站点时该表不显示。
我遵循了有关如何执行此代码的教程，但我不确定哪些键和值是不应该做的。但如果我删除它们，则会导致同样的问题，表格不会显示数据。

标签： javascript html json api

【解决方案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

【讨论】：

@TaranBasi 如果它运行良好，您可以将其标记为答案。

【解决方案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>';
});

改为。

【讨论】：

【解决方案3】：

Data 是 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);
    });
});

【讨论】：