如何解决此错误:获取http://127.0.0.1:5500/Fetch_user_data/undefined404

Question

iam从外部api中获取数据，使用显示卡片的卡片在网页上显示；未定义的"；消息而不是值。我的console.log(completedata(在一个数组中显示记录。下面是我的代码：

<script>

fetch("https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=key4v56MUqVr9sNJv")

.then((data)=>{
// console.log(data)
return data.json();
})
.then ((completedata)=>{
//console.log(completedata.records[0])
let data1="";
completedata.records.map((values)=>{
data1+=` 
<div class="card">
<img src=${values.avatar} alt="Avatar" class="avatar">
<p class="name">${values.name}</p>
<p class="occupation">${values.occupation}</p>
</div>
`;
});

document.getElementById("card").
innerHTML=data1;

})

.catch((error)=>{
console.log(error);
})


</script>

Answer 1

这里有几件事需要解决，所以我会尝试一次解决一件。

第一：从您提供的代码中删除您的API密钥。由于此网站是公开的，您将向整个互联网公开您的API密钥(以及任何连接的数据(，其中可能包括机器人和其他邪恶的个人。

接下来是关于您的特定错误消息">获取http://127.0.0.1:5500/Fetch_user_data/undefined404(未找到("；。你得到的错误是因为在src属性中为每个化身设置的图像不存在，而这是浏览器告诉你它无法加载图像。这与您的代码为所有内容提取">未定义"值的事实直接相关。因此，浏览器正在尝试加载一个名为">undefined"的图像(以及*http://127.0.0.1:5500/Fetch_user_data/*'部分只是当前页面运行的位置(。

现在，关于为什么这些值是">未定义"。这是因为您没有根据返回对象的结构正确提取数据。对象的records部分包含一个对象数组，但是您想要的值也在fields对象内部：

{
"id":"rec0Aw9wpncgA9cdK",
"createdTime":"2022-07-25T01:33:41.000Z",
"fields": {
"Id":79,
"Name":"Julia A. Robles",
"avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg",
"occupation":"Prosthodontist"
}
}

同样需要注意的是，对象的属性区分大小写。这意味着，当您尝试拉取此对象的name属性时(即使在将其调整为拉取fields.name之后(，它也会失败，因为此属性不存在。相反，您必须提取区分大小写的Name属性。

最后要解决的是头像图像。虽然正确提取src似乎可以工作，但实际提供的URL并没有链接到图像。AWS表示这些文件要么不存在，要么是已删除的bucket的一部分。

但是，在解决了所有这些问题之后，你最终会得到这样的结果。

fetch("https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=YOUR_API_KEY_HERE")
.then(r => r.json())
.then(d => {
let data1 = "";
d.records.forEach(v => {
data1 += `<div class="card">
<span class="avatarLetter">${v.fields.Name.substr(0, 1)}${v.fields.Name.split(" ")[v.fields.Name.split(" ").length-1].substr(0, 1)}</span>
<p class="name">${v.fields.Name}</p>
<p class="occupation">${v.fields.occupation}</p>
</div>`;
});
document.querySelector("#card").innerHTML = data1;
})
.catch(e => console.log(e));

.avatarLetter {
background: #328DD2;
color: #FFF;
font-size: 2em;
font-weight: bold;
line-height: 2em;
width: 2em;
height: 2em;
text-align: center;
border-radius: 2em;
display: inline-block;
}

<div id="card"></div>