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

Question

我正在尝试从 API https://randomuser.me/api/ 获取一些数据(头衔、姓氏、名字以及 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 传递给函数。按以下方式操作

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;