从REST API拉取数据时出现undefined的问题排查与解决

核心原因 #

Airtable API 的返回结构和你本地测试的 JSON 数组完全不同：

• 你本地的 JSON 是直接包含对象的数组
• 而 Airtable API 返回的是一个包含 records 数组的顶层对象，每个记录的字段数据都嵌套在 fields 属性中；记录的 id 是记录对象本身的属性，不在 fields 里

你通过 console.log(data) 看到的完整结构大概是这样：

{
  "records": [
    {
      "id": "recXXXXXXX",
      "fields": {
        "name": "Charlie S. Gerardi",
        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg",
        "occupation": "Residential electrician"
      }
    }
  ]
}

修复代码 #

你需要先访问 data.records 拿到记录数组，再遍历或单个访问记录的 fields 属性获取字段值：

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();
    
    // 遍历所有记录
    data.records.forEach(record => {
        console.log(record.fields.name);
        console.log(record.id); // 记录id在record对象本身
        console.log(record.fields.avatar);
        console.log(record.fields.occupation);
    });

    // 如果只需要第一个记录
    if (data.records.length > 0) {
        const firstRecord = data.records[0];
        console.log(firstRecord.fields.name);
        console.log(firstRecord.id);
    }
}
getAirtable()

注意事项 #

• 确保Airtable表中确实存在 name、avatar、occupation 这些字段名，字段名大小写敏感
• 如果字段为空，fields 里可能不会包含该属性，建议用可选链操作符避免报错：record.fields?.avatar

内容的提问来源于stack exchange，提问作者Rick Derick