时间戳

首页 > 解决方案 > 无法使用索引从我的数组中调用项目 - Javascript

javascript - 无法使用索引从我的数组中调用项目 - Javascript

问题描述

所以我得到了这段代码，它可以将来自 API 的数据推送到数组中，它有点工作。如果我将数组作为一个整体记录，它确实会显示整个数组，但如果我尝试在数组中记录特定对象，它会返回“未定义”。

我的代码如下：

let people = [];
fetch('https://randomuser.me/api/?results=10')
    .then(function(response){
        return response.json();
    })
    .then(function(data){
        for(i=0; i<10; i++){
            let person = data.results[i];
            let x = {
                name: person.name.first + " " +person.name.last,
                picture: person.picture.large,
                age: person.dob.age,
                place: person.location.street + "<br>" + person.location.city + "<br>" + person.location.state
            }
            people.push(x);
        }
    }).catch(function(error){
            console.log('Data is not shown ' + error.message);
});


console.log(people); // works fine
console.log(people[0]); // returns undefined
console.log(people.length); //returns 0

标签： javascript

解决方案

@ibrahimyilmaz 是正确的：您希望在AJAX 请求完成后控制台日志使用您的people数组。

您对阵列的处理取决于您自己。person假设您有一个将 a 的名称插入DOM的函数：

function renderPersonsNameToHeader(person) {
    var header = document.querySelector('h1');
    header.innerText = person.name;
}

所以你的代码看起来像：

let people = [];

function renderPersonsNameToHeader(person) {
    var header = document.querySelector('h1');
    header.innerText = person.name;
}

fetch('https://randomuser.me/api/?results=10')
    .then(function(response){
        return response.json();
    })
    .then(function(data){
        for(i=0; i<10; i++){
            let person = data.results[i];
            let x = {
                name: person.name.first + " " +person.name.last,
                picture: person.picture.large,
                age: person.dob.age,
                place: person.location.street + "<br>" + person.location.city + "<br>" + person.location.state
            }
            people.push(x);
        }

        // Now that our `people` array is built, we can use the data!
        renderPersonsNameToHeader(people[0]);
    }).catch(function(error){
        onsole.log('Data is not shown ' + error.message);
    });

推荐阅读