如何访问JSON中data键内的嵌套数据？解决返回undefined问题

你遇到的response.data[0]返回undefined的情况，大概率是以下几个原因导致的，对应解决方法如下：

• 确认response是否已解析为JSON对象
  如果你的response是从接口获取的原始字符串（比如直接用XMLHttpRequest或者未处理的fetch响应），必须先把它解析成JavaScript对象才能访问属性：

  // 解析JSON字符串为JS对象
  const parsedResponse = JSON.parse(response);
  // 正常访问数组内的字段
  const userName = parsedResponse.data[0].name;
  const userDisplayName = parsedResponse.data[0].displayName;
  console.log(userName, userDisplayName);
  

• 检查response的实际结构是否符合预期
  先打印整个response确认真实结构：

  console.log(response);
  

  有可能接口返回的字段名和你预期的不一致（比如写成Data而非data），或者data本身是空数组/null，这时候data[0]自然会是undefined。

• 如果使用fetch API，需完成响应解析步骤
  fetch返回的是Response对象，必须调用.json()方法才能得到解析后的JSON数据：

  fetch('你的接口地址')
    .then(res => res.json()) // 解析响应为JSON对象
    .then(parsedData => {
      if (parsedData.data && parsedData.data.length > 0) {
        const user = parsedData.data[0];
        console.log(user.name, user.displayName);
      }
    });
  

• 添加空值判断避免报错
  不管哪种场景，建议先判断data数组是否存在且有内容，防止出现运行时错误：

  if (response?.data?.length > 0) {
    const user = response.data[0];
    console.log(user.name, user.displayName);
  } else {
    console.log("没有可访问的用户数据");
  }
  

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