使用Fetch API获取JSON数据后data.quote显示undefined问题求助

1. 第一个报错的原因 #

response.json()方法已经把服务器返回的JSON字符串解析成了JavaScript对象/数组，此时你再调用JSON.parse(data.quote)，相当于给JSON.parse传了一个非字符串值（当时data是数组，data.quote本身就是undefined；就算是对象，转成字符串后是"[object Object]"），而JSON.parse只能接收合法的JSON字符串，所以会抛出unexpected token o的错误。

2. 为什么console.log(data.quote)显示undefined #

你调用的这个接口返回的是包含单个对象的数组，不是单个对象。比如接口返回的数据结构是这样的：

[
  {
    "quote": "I am the one who knocks.",
    "author": "Walter White"
  }
]

data是一个数组，数组本身没有quote属性，自然会返回undefined。你需要先取数组的第一个元素，再访问它的quote属性。

正确的代码写法 #

fetch('https://api.breakingbadquotes.xyz/v1/quotes')
  .then(response => response.json())
  .then(data => {
    // 先打印整个data，确认结构（新手调试必备）
    console.log('接口返回的数据:', data);
    // 取数组第一个元素的quote字段
    console.log('提取的quote:', data[0].quote);
  })
  .catch(err => console.log('请求失败:', err));

新手调试小技巧 #

遇到数据结构不确定的情况，先直接console.log(data)打印整个返回结果，看清它是对象还是数组，再逐层访问对应的属性，不要凭直觉去取值。

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