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

user_11717892 0
Viewed 113

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": "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
        }
      ]
    }
  ]
}]

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.

angular grid arrays javascript
2 Answers

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": "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)

user_94737640

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.

user_100048930
Related