Javascript 获取和显示用户的详细信息

Javascript 获取和显示用户的详细信息,javascript,arrays,api,Javascript,Arrays,Api,在fetchAndDisplayUsers中,在调用displayUsers后,声明一个api变量并将其值设置为 使用浏览器的FetchAPI对API表示的API端点进行HTTP调用 fetch调用返回一个包含响应的承诺。在.then调用中使用arrow函数将响应转换为JSON 在另一个函数中使用arrow函数,然后调用接收转换后的JSON数据。arrow函数应该解构其参数以获得results属性。然后,函数体应该对结果数组进行反结构,以从API中获取用户对象的第一项,该项应该分配给用户变量。最

在fetchAndDisplayUsers中,在调用displayUsers后,声明一个api变量并将其值设置为

使用浏览器的FetchAPI对API表示的API端点进行HTTP调用

fetch调用返回一个包含响应的承诺。在.then调用中使用arrow函数将响应转换为JSON

在另一个函数中使用arrow函数,然后调用接收转换后的JSON数据。arrow函数应该解构其参数以获得results属性。然后,函数体应该对结果数组进行反结构,以从API中获取用户对象的第一项,该项应该分配给用户变量。最后,它应该将用户对象添加到我们的用户数组中,然后使用包含新用户对象的内联数组调用displayUsers

将错误处理添加到提取调用

我希望这个函数从api获取数据并显示它们

const fetchAndDisplayUsers===>{ 用户推送{ 年龄:40,, 体重:75, 身高:6, 国家:'尼日利亚', 姓名:“查尔斯·奥迪利”, id:'dfhb454768DghtF' })

    users.push({
      age: 26,
      weight: 72,
      height: 6,
      country: 'Ugandan',
      name: 'Peter Odili',
      id: 'gydf4'
    });

    displayUsers(users);
        const api =  'https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84'
          fetch(api)
           .then(response => {
                 return response.json();
           })  
           .then(({results}) => {
            users = users.concat(results);
            displayUsers(users);
          }).catch(error => {
             console.log(error);
          })

    const displayUsers = (results) => {
       const selectItems = document.querySelector('.select-text');
        users.forEach(element => {
            console.log(element);
            const options = document.createElement("option");
            options.textContent = element.name;
            options.value = element.id;
            selectItems.appendChild(options);
        });
    };
const api =  'https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84'
fetch(api)
  .then(response => {
    return response.json();
  })  
  .then(({results}) => {
    const [ user ] = results;
    users.push(user);
    displayUsers([user]);
  })
  .catch(error => { console.log(error)})
};