使用 javascript 遍历对象数组

Question

我正在尝试遍历对象数组，但不知何故没有正确完成。有人可以让我知道我哪里错了吗。

这是数据

const response = {
    "pass": 1,
    "fail": 2,
    "projects_all": [
        {
            "projects": [
                {
                    "name": "Project1",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "UNKNOWN",
                    }
                }
            ]
        },
        {
            "projects": [
                {
                    "name": "Project2",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "FAIL",
                    }
                },
                {
                    "name": "Project3",
                    "status": "LIVE",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "UNKNOWN",
                    }
                }
            ]
        }
    ]
}

这是我试过的代码

if(response) {
  response?.projects_all?.forEach((projects) => {
     projects.forEach(project) => {
       if(project.previous !== null) {
         //do something here
       }
    });
 });
}

我正在尝试遍历这个对象数组，但它说项目不可迭代。感谢任何帮助，让我明白我哪里出错了。

Answer 1

您没有正确地迭代数组。一个好主意是格式化您计划迭代的 JSON 对象。这样你就可以看到数组和对象是什么，在什么层级。

if (response) {
  response?.projects_all?.forEach((project) => {
    project?.projects?.forEach((project) => {
      console.log(project?.name);
    });
  }
  );
}

Answer 2

response?.projects_all?.forEach((projects) => {

这是开始代码的正确方式。接下来发生的问题是您显然误解了 projects 在以下上下文中的含义

你做 projects.forEach(project) 就好像你认为 projects 是数组一样。 projects 此时不是数组，它是一个对象，如下所示：

        {
            "projects": [
                {
                    "name": "Project1",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "UNKNOWN",
                    }
                }
            ]
        }

所以我实际上想做 projects.projects.forEach(project => { ... })，或者您可以将变量名称从 projects 更改为更便于阅读。

Answer 3

首先，确定您的响应对象当前的形状。通过使用 ?. 运算符，您的 JS 内置错误报告。

根据上下文，我假设您的回复实际上是这样的：

console.log(response);
{
   data: {
      projects_all: [ ... ]
   }
}

因此，您使用 response?.projects_all 的现有代码实际上并未命中您的响应中的 projects_all 属性。

你可以尝试以下方法吗：

response.data.projects_all.forEach((project) => {
   console.info("Project: ", project);
   project.projects.forEach((project) => {
      console.log(project, project?.name);
   });
});

或者，如果您的响应对象中没有 data 键，您可以在循环中省略它：

response.data.projects_all.forEach((project) => {
   console.info("Project: ", project);
   project.projects.forEach((project) => {
      console.log(project, project?.name);
   });
});

使用 javascript 遍历对象数组

Iterate through array of objects using javascript

javascript

arrays

loops

object

iterator