I want to flat a nested arrays of objects and convert them into one object array

Question

I have below type of JSON response coming from backend. I am displaying this response in grid table. For that I need only array of "projects" objects throughout the whole response. I am not able to get all projects together.

[{
  "responseText": "Success",
  "userName": "[email protected]",
  "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
        }
      ]
    }
  ]
}]

I tried to do this with nested for loop but with that only last array is coming not all arrays . Like below.

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)

Can anybody suggest better approach to get right response.

@gorak ; thats very efficient . Worked like charm. Thanks.

sagar03
– sagar03

2020-11-08 07:44:45 +00:00
Commented Nov 8, 2020 at 7:44 — sagar03
– sagar03, Commented Nov 8, 2020 at 7:44

Nick · Accepted Answer · 2020-11-08 07:48:22Z

If you're using a browser that doesn't support Array.flatMap, you can achieve the result you want using a nested Array.reduce:

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

const selectedUser = [{
  "responseText": "Success",
  "userName": "[email protected]",
  "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)

Sourav Dutta · Accepted Answer · 2020-11-08 10:38:48Z

2

You will need flatMap to flatten the array. Something like this you can implement:

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

Check browser compatibility table for flatMap before using this.

edited Nov 8, 2020 at 10:38

Sourav Dutta

1,3281 gold badge20 silver badges26 bronze badges

answered Nov 8, 2020 at 7:40

Rajneesh

5,3181 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

I want to flat a nested arrays of objects and convert them into one object array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related