我想展平嵌套的对象数组并将它们转换为一个对象数组答案

【问题标题】：I want to flat a nested arrays of objects and convert them into one object array我想展平嵌套的对象数组并将它们转换为一个对象数组
【发布时间】：2020-11-08 07:29:31
【问题描述】：

我有以下类型的来自后端的 JSON 响应。我在网格表中显示此响应。为此，我只需要整个响应中的“项目”对象数组。我无法将所有项目放在一起。

[{
  "responseText": "Success",
  "userName": "ranjeet.sh14@gmail.com",
  "userId": 2,
  "projectDetails": [{
      "accountName": "ViewEnvironment",
      "projects": [{
        "responseText": "success",
        "id": 34,
        "projectName": "Plato",
        "accountName": "ViewEnvironment",
        "projectHealth": null,
        "modulesCount": 0,
        "cordinatorEmail": null,
        "businessType": null,
        "projectType": null,
        "status": null,
        "createdDate": null,
        "createdBy": null,
        "modifiedDate": null,
        "modifiedBy": null,
        "role": "DL/PM",
        "roleId": 3,
        "projectUserId": 89
      }]
    },
    {
      "accountName": "Accloud",
      "projects": [{
          "responseText": "success",
          "id": 4,
          "projectName": "Citi Test2",
          "accountName": "Accloud",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Executive",
          "roleId": 2,
          "projectUserId": 83
        },
        {
          "responseText": null,
          "id": 5,
          "projectName": "Citi Test3",
          "accountName": "Accloud",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Executive",
          "roleId": 2,
          "projectUserId": 221
        },
        {
          "responseText": null,
          "id": 9,
          "projectName": "Test_Project",
          "accountName": "Accloud",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Executive",
          "roleId": 2,
          "projectUserId": 220
        }
      ]
    },
    {
      "accountName": "iBASE",
      "projects": [{
          "responseText": "success",
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Admin",
          "roleId": 1,
          "projectUserId": 70
        },
        {
          "responseText": null,
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Admin",
          "roleId": 1,
          "projectUserId": 72
        },
        {
          "responseText": null,
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Admin",
          "roleId": 1,
          "projectUserId": 73
        },
        {
          "responseText": null,
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Developer",
          "roleId": 5,
          "projectUserId": 74
        }
      ]
    }
  ]
}]

我试图用嵌套的 for 循环来做到这一点，但只有最后一个数组来了，不是所有的数组。如下所示。

for (let user of this.selectedUser) {
  this.projectList = user.projectDetails;
  for (project of this.projectList) {
    (this.projectList2) = project.projects;

    for (let proj of this.projectList2) {
      this.finalProjectsList = proj;
    }
  }
}
console.log("projcetlist", this.projectList.projects)

任何人都可以提出更好的方法来获得正确的响应。

【问题讨论】：

@gorak ;那是非常有效的。像魅力一样工作。谢谢。

标签： javascript arrays angular grid

【解决方案1】：

如果您使用的浏览器不支持Array.flatMap，您可以使用嵌套的Array.reduce 获得您想要的结果：

const projectList = selectedUser.reduce((p, {  projectDetails }) =>
  p.concat(projectDetails.reduce((c, { projects }) =>
    c.concat(projects), [])
  ),
[]);

const selectedUser = [{
  "responseText": "Success",
  "userName": "ranjeet.sh14@gmail.com",
  "userId": 2,
  "projectDetails": [{
      "accountName": "ViewEnvironment",
      "projects": [{
        "responseText": "success",
        "id": 34,
        "projectName": "Plato",
        "accountName": "ViewEnvironment",
        "projectHealth": null,
        "modulesCount": 0,
        "cordinatorEmail": null,
        "businessType": null,
        "projectType": null,
        "status": null,
        "createdDate": null,
        "createdBy": null,
        "modifiedDate": null,
        "modifiedBy": null,
        "role": "DL/PM",
        "roleId": 3,
        "projectUserId": 89
      }]
    },
    {
      "accountName": "Accloud",
      "projects": [{
          "responseText": "success",
          "id": 4,
          "projectName": "Citi Test2",
          "accountName": "Accloud",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Executive",
          "roleId": 2,
          "projectUserId": 83
        },
        {
          "responseText": null,
          "id": 5,
          "projectName": "Citi Test3",
          "accountName": "Accloud",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Executive",
          "roleId": 2,
          "projectUserId": 221
        },
        {
          "responseText": null,
          "id": 9,
          "projectName": "Test_Project",
          "accountName": "Accloud",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Executive",
          "roleId": 2,
          "projectUserId": 220
        }
      ]
    },
    {
      "accountName": "iBASE",
      "projects": [{
          "responseText": "success",
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Admin",
          "roleId": 1,
          "projectUserId": 70
        },
        {
          "responseText": null,
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Admin",
          "roleId": 1,
          "projectUserId": 72
        },
        {
          "responseText": null,
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Admin",
          "roleId": 1,
          "projectUserId": 73
        },
        {
          "responseText": null,
          "id": 1,
          "projectName": "iBase-Project-edit",
          "accountName": "iBASE",
          "projectHealth": null,
          "modulesCount": 0,
          "cordinatorEmail": null,
          "businessType": null,
          "projectType": null,
          "status": null,
          "createdDate": null,
          "createdBy": null,
          "modifiedDate": null,
          "modifiedBy": null,
          "role": "Developer",
          "roleId": 5,
          "projectUserId": 74
        }
      ]
    }
  ]
}];

const projectList = selectedUser.reduce((p, {  projectDetails }) =>
  p.concat(projectDetails.reduce((c, { projects }) =>
    c.concat(projects), [])), []);
console.log(projectList)

【讨论】：

【解决方案2】：

您将需要flatMap 来展平阵列。你可以实现这样的东西：

    const result = givenArray.flatMap(a=>a.projectDetails.flatMap(b=>b.projects));

在使用之前检查browser compatibility table 是否有flatMap。

【讨论】：