如何解决网页卡片展示数据时出现的Type Error: completedata.map is not a function错误

问题根源 #

Airtable API的响应结构不是直接的数组，而是包含records数组的对象。你直接对整个响应对象completedata调用map方法，但对象没有map方法，所以抛出类型错误。

另外代码还有两个小问题：

• 循环中每次用data1 = ...会覆盖之前的内容，最终只会显示最后一条数据
• Airtable返回的字段数据存在fields属性下，直接访问values.Name或values.avatar会拿到undefined

修复后的代码 #

<script>
  fetch(
    "https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=##"
  ).then((data) => {
    return data.json();
  }).then((completedata) => {
    let data1 = "";
    // 遍历records数组，而不是整个响应对象
    completedata.records.map((values) => {
      // 从fields属性中获取字段值
      data1 += `
        <div class="card">
            <img src=${values.fields.avatar || ''} alt="Avatar" class="avatar">
            <p class="name">${values.fields.Name || '未命名'}</p>
            <p class="occupation">${values.fields.occupation || '无职业信息'}</p>
        </div>
      `;
    });
    document.getElementById("card").innerHTML = data1;
  }).catch((error) => {
    console.log(error);
  });
</script>

关键修改点 #

• 把completedata.map改为completedata.records.map，因为实际数据数组在records字段中
• 将data1 =改为data1 +=，确保所有卡片内容都被拼接起来
• 字段访问改为values.fields.xxx，匹配Airtable API的响应结构
• 添加||默认值处理，避免字段为空时显示undefined

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