JavaScript多层嵌套数组遍历问题：第二层起返回undefined

你遇到的undefined问题，核心是JSON结构不一致加上遍历前未做属性存在性检查导致的，咱们一步步拆解：

问题根源 #

先看你的JSON字符串里projects数组的两个元素：

1. 第一个元素是完整的项目对象：包含projectname、dateadded、notes等字段，但没有task数组
2. 第二个元素是一个仅包含task数组的对象：完全没有dateadded、notes这些项目级字段

这就导致：

• 当循环到第二个项目（j=1）时，data[i].projects[j].dateadded必然是undefined
• 当循环到第一个项目（j=0）时，data[i].projects[j].task是undefined，再去访问它的length会直接抛出错误（你的代码没报错可能是浏览器兼容，但逻辑上已经出问题了）

两种修复方案 #

方案1：修正JSON结构（推荐） #

如果可以修改JSON，建议让每个projects元素的结构保持一致——每个项目都包含基础字段+task数组（没有任务就放空数组），这是更规范的嵌套结构：

[
  {
    "username":"test",
    "usersurname":"test",
    "cellnumber":"test",
    "displayname":"test",
    "profilepicture":"test",
    "projects":[
      {
        "projectname":"test",
        "dateadded":"test",
        "notes":"test",
        "image":"test",
        "task":[]
      },
      {
        "projectname":"test-project-2",
        "dateadded":"test",
        "notes":"test",
        "image":"test",
        "task":[
          {"taskname":"test","taskdescription":"test","taskimage":"test"}
        ]
      }
    ]
  }
]

方案2：在遍历中增加存在性检查（适配现有JSON） #

如果不能修改JSON，就在遍历的每一步都检查属性是否存在，避免访问不存在的属性导致undefined或报错：

// 假设data是已经解析好的JSON对象
for(var i = 0; i < data.length; i++){
  const user = data[i];
  // 提取用户信息
  const username = user.username;
  console.log(username);
  const usersurname = user.usersurname;
  const cellnumber = user.cellnumber;
  const displayname = user.displayname;
  const profilepicture = user.profilepicture;

  // 先检查用户是否有projects数组
  if (user.projects && Array.isArray(user.projects)) {
    for(var j = 0; j < user.projects.length; j++){
      const project = user.projects[j];
      // 访问项目字段前，用空值合并运算符给undefined设置默认值
      const dateadded = project.dateadded ?? '无添加日期';
      console.log(dateadded);
      const notes = project.notes ?? '无备注';
      const image = project.image ?? '无图片';

      // 检查当前项目是否有task数组，再遍历任务
      if (project.task && Array.isArray(project.task)) {
        for(var k = 0; k < project.task.length; k++){
          const task = project.task[k];
          const taskname = task.taskname;
          console.log(taskname);
          const taskdescription = task.taskdescription;
          const taskimage = task.taskimage;
        }
      } else {
        console.log(`第${j+1}个项目没有任务列表`);
      }
    }
  } else {
    console.log(`第${i+1}个用户没有项目列表`);
  }
}

关键优化点 #

• 用const声明不需要重新赋值的变量，代码更严谨
• 每次访问嵌套属性前先检查是否存在（比如user.projects && Array.isArray(user.projects)）
• 使用??（空值合并运算符）给undefined的字段设置友好的默认值，避免控制台输出undefined

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