解构 API https://randomuser.me/api/ 以获取 API 返回的用户个人资料的标题、姓氏和名字大照片

Question

我正在尝试从 API https://randomuser.me/api/，这似乎不起作用。

const displayUserPhotoAndName = (data) => {
    if(!data) return;

    // add your code here

    let {results} = data;

    let [profile] = results;

    document.querySelector('h2').textContent = profile.name.title +' '+ profile.name.last +' '+ profile.name.first;

    document.querySelector('img').src = profile.picture.large;


    displayExtraUserInfo(profile);
    clearNotice();
  };

  const getAUserProfile = () => {
    const api = 'https://randomuser.me/api/';

    // make API call here

    fetch(api)
    .then((resp) => resp.json())
    .then(data => {displayUserPhotoAndName()});

    notify(`requesting profile data ...`);
  };



  const displayBirthdate = ({dob = 'dob'}) => {
    document.querySelector('.details').textContent = dob.age;
  }

  const displayPhone = ({phone = 'phone', cell = 'cell'}) => {
    document.querySelector('.details').textContent = phone + ', ' + cell;
  }

  const displayAddress = ({location = 'location'}) => {
    document.querySelector('.details').textContent = location.street + ', ' + location.city + ', ' + location.state;
  }

Answer 1

您正在将 data 传递给 function.Do，如下所示

const getAUserProfile = () => {
    const api = 'https://randomuser.me/api/';

    // make API call here

    fetch(api)
    .then((resp) => resp.json())
    .then(data => {displayUserPhotoAndName(data)});  //this line is changed

    notify(`requesting profile data ...`);
};

这是将获得所有必需属性的行

let {results:[{ name: { title , first , last } , picture:{ large } }]} = data;

Answer 2

这里是你如何做到这一点以及如何使用默认值处理错误数据。另外，不要忘记在 then 回调中将 data 传递给您的函数：

const display = data => {
  const { results: [{ name: { title, first, last } = {}, picture: { large } = {} }] = [] } = data || {};

  console.log(title, first, last, large);
};

fetch('https://randomuser.me/api/').then(r => display(r.json()));

解构 API https://randomuser.me/api/ 以获取 API 返回的用户个人资料的标题、姓氏和名字大照片

Destructuring the API https://randomuser.me/api/ to grab title, last name, and first name also large photo of the user profile returned by the API

javascript

destructuring

ecmascript-6