在从REST API获取数据的同时，如何解决代码中的未定义问题

Question

我正在从json文件中提取数据

[
{
"name": "Charlie S. Gerardi",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg",
"id": 75,
"occupation": "Residential electrician"
},
{
"name": "Riley D. Norris",
"avatar": "",
"id": 23,
"occupation": "Transmission engineer"
}
]

当我console.log(data)能够看到json文件时

<script>
const api_url='https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=key4v56MUqVr9sNJv'
async function getAirtable() {
const response = await fetch(api_url);
const data = await response.json();
console.log(data.name)
console.log(data.id)           //am not able to see the values in my consol//
console.log(data.avatar)
console.log(data.occupation)
}
getAirtable()
</script>

Answer 1

要访问您的数据，请通过循环项目来尝试此逻辑

const api_url = "https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=key4v56MUqVr9sNJv";
async function getAirtable() {
const response = await fetch(api_url);
const data = await response.json();
const allData = data.records.map((rec) => rec.fields);
//   allData = [
//     {
//       Id: 79,
//       Name: "Julia A. Robles",
//       avatar:
//         "https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg",
//       occupation: "Prosthodontist",
//     },
//     {
//       Id: 29,
//       Name: "Matthew H. Glover",
//       avatar:
//         "https://s3.amazonaws.com/uifaces/faces/twitter/flame_kaizar/128.jpg",
//       occupation: "Transportation attendant",
//     },
//   ];
console.log(allData);
}

Answer 2

基于JSON，数据是一个数组，所以如果你想查看所有内容，你需要遍历数组，比如

data.forEach(item => console.log(item.id))