如何进行Api抓取并显示结果
如何进行Api抓取并显示结果
提问于 2019-04-10 21:21:51
我正在开发一个简单的应用程序，它将从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属性；
我试图在下一行中创建第二个语句，该语句对我刚刚创建的results变量进行解构，并从中获得第一项(它是一个Array！参见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.title + profile.first + profile.last；来显示头衔、名字和姓氏。
当我尝试在sapio中运行它时，它不工作
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-04-10 21:35:52
data或结果数组中没有profile属性。因此，您的分配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>
Stack Overflow用户
发布于 2019-04-10 21:31:48
你可能需要这样做：
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;Stack Overflow用户
发布于 2019-04-11 08:05:49
这就是对我有效的方法
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();
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55613682
复制相关文章
相似问题