Question

我正在开发一个简单的应用程序，它将从Api提取数据并显示它。

a具有此功能

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

  // make API call here
  return fetch(api)
    .then(response => response.json())
    .then(response => displayUserPhotoAndName(response))
  notify(`requesting profile data ...`);
};

这是我尝试获取数据并将其作为参数传递给displayUserPhotoAndName函数的地方。

现在，在displayUserPhotoAndName函数中，我尝试创建一个语句，该语句对数据参数进行解构并从中获取results属性；

我试图在下一行中创建第二条语句来解构刚刚创建的结果变量，并从中获得第一项（它是一个数组！请参见https://randomuser.me/api/）。解构的数组项应声明为配置文件。这代表我想在我的应用程序中显示的API调用中获得的用户个人资料数据。

这是displayUserPhotoAndName函数

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

    // add your code here
    const {results} = data;
    const {profile} = results;
    document.getElementById('name').innerHTML = profile[results];

    clearNotice();
  };

现在我正在尝试使用此行代码document.getElementById（'name'）。innerHTML = profile [0] .title + profile [0] .first + profile [0]显示标题，名字和姓氏] .last;。

当我尝试在sapio中运行它时，这不起作用

Answer 1

您可能需要此：

document.getElementById('name').innerHTML = results[0].name.title + results[0].name.first + results[0].name.last;

因为json看起来像这样：

{
  "results":[
    {
      "gender":"male",
      "name":{
        "title":"mr",
        "first":"vidar",
        "last":"sjursen"
      },
      "location":{
        "street":"bestum tverrvei 7385",
        "city":"bratsberg",
        "state":"sogn og fjordane",
        "postcode":"8514",
        "coordinates":{
          "latitude":"57.7278",
          "longitude":"-95.6342"
        },
        "timezone":{
          "offset":"+7:00",
          "description":"Bangkok, Hanoi, Jakarta"
        }
      },
      "email":"vidar.sjursen@example.com",
      "login":{
        "uuid":"fbc411b4-f34c-497f-acff-8294ddcf8738",
        "username":"whitezebra569",
        "password":"shoes",
        "salt":"8prWID0j",
        "md5":"02ea3e887aaa140ad312905801ae2353",
        "sha1":"c9a66349e68825dc02c74618aac8572fbdd01e5b",
        "sha256":"8297cc85be1127223761fb80b8f554632a6a37c35d58d435293a8f6b2dca19f3"
      },
      "dob":{
        "date":"1952-10-19T01:20:59Z",
        "age":66
      },
      "registered":{
        "date":"2011-11-12T03:06:29Z",
        "age":7
      },
      "phone":"88795425",
      "cell":"92914506",
      "id":{
        "name":"FN",
        "value":"19105218888"
      },
      "picture":{
        "large":"https://randomuser.me/api/portraits/men/25.jpg",
        "medium":"https://randomuser.me/api/portraits/med/men/25.jpg",
        "thumbnail":"https://randomuser.me/api/portraits/thumb/men/25.jpg"
      },
      "nat":"NO"
    }
  ],
  "info":{
    "seed":"48917bf154395ac4",
    "results":1,
    "page":1,
    "version":"1.2"
  }
}

这是什么意思，

const {results} = data;

然后该数组将存在，并且该数组没有配置文件属性可通过以下方式获取它：

const {profile} = results;

Answer 2

profile或结果数组中没有data属性。因此您的分配const {profile} = results;将是不确定的

您可以将profile指向结果数组的第一项。然后使用属性路径显示您要显示的内容

const displayUserPhotoAndName = (data) => {
  if (!data) return;
 
  // add your code here
  const {results} = data;

  const profile = results[0];
  
  const fullName = profile.name.first + ' ' + profile.name.last;

  document.getElementById('name').innerHTML = fullName

};

const getAUserProfile = () => {
  const api = 'https://randomuser.me/api/';

  // make API call here
  return fetch(api)
    .then(response => response.json())
    .then(displayUserPhotoAndName)

};

getAUserProfile()

<div id="name"></div>

Answer 3

问题出在这行代码

const {results} = data;
-->  const {profile} = results;

“ {results}”将把results属性从您的响应中删除，该响应又是一个数组。

当您尝试从结果中提取{profile}时，其中没有诸如profile之类的属性。

这使配置文件变量未定义。这就是问题所在。

注意：{something}变量将在对象中查找属性。 [在这种情况下，财产是某些东西]

希望这对您有帮助

Answer 4

这对我有用

const displayUserPhotoAndName = (data) => {
            if(!data) return;
            // add your code here
            const {results} = data;
          const [profile] = [...results];

            const fullName = profile.name.title + ' ' + profile.name.last + ' ' + profile.name.first;

      document.getElementById('name').innerHTML = fullName
       document.getElementById('photo').src = profile.picture.large
            displayExtraUserInfo(profile);

            clearNotice();
          };

但是我还需要在下面修改此功能，以获取并显示用户的年龄并显示它。这就是我尝试过的

var displayBirthdate = ({dob}) => {
        const {results} = dob;
      const [profile] = [...results];
        const theage = profile.dob.age;
        document.querySelector('.details').innerHTML = theage + 'years old';
      };

请帮助我如何解决此问题

Answer 5

const {profile} = results;在这里profile是undefined，因为results是一个没有属性配置文件的数组。

您需要先执行const profile = [...results];，然后再执行document.getElementById('name').innerHTML = profile[0].name.title + profile[0].name.first + profile[0].name.last;

fetch('https://randomuser.me/api/')
  .then(res => res.json())
  .then(data => {
      if (!data) return;
      const {
        results
      } = data;
      const profile = [...results];
      console.log(profile)
      document.getElementById('name').innerHTML =  profile[0].name.title + profile[0].name.first + profile[0].name.last;
    }

  )

<div id="name"></div>

如何做Api获取并显示结果

5 个答案: