Merging array of objects with nesting

Question

I have been having a little issue combining array of Objects based on ids. I have three data sets (removed data to reduce length)

Set One

[
   {
      "id":1,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"350",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
   {
      "id":2,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"12",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
]

Set Two

[
   {
      "id":1,
      "resultOneId":1,
      "startDate":"2022-02-01T16:00:00.000Z",
      "endDate":"2022-02-08T18:00:00.000Z",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
   {
      "id":2,
      "resultOneId":1,
      "startDate":"2021-02-08T09:00:00.000Z",
      "endDate":"2021-02-17T18:00:00.000Z",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
    {
      "id":3,
      "resultOneId":2,
      "startDate":"2021-02-08T09:00:00.000Z",
      "endDate":"2021-02-17T18:00:00.000Z",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
]

Set Three

[
    {
        "id": 1,
        "resultTwoId": 1,
        "Job": "Technician",
    },
    {
        "id": 2,
        "resultTwoId": 1,
        "Job": "Electrician",
    },
    {
        "id": 3,
        "resultTwoId": 2,
        "Job": "Painter",
    },
    {
        "id": 4,
        "resultTwoId": 3,
        "Job": "Painter",
    },
    ...
]

Essentially, Set Two is a child of Set One, and Set Three is a chile of Set Two. The output I am aiming for is something like this

[
   {
      "id":1,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"350",
      "created_at":"2021-12-08T17:53:12.000Z",
      "resultTwos": [
          {
              "id":1,
              "resultOneId":1,
              "startDate":"2022-02-01T16:00:00.000Z",
              "endDate":"2022-02-08T18:00:00.000Z",
              "created_at":"2021-12-08T17:53:12.000Z",
              "resultThress": [
                {
                    "id": 1,
                    "resultTwoId": 1,
                    "Job": "Technician",
                },
                {
                    "id": 2,
                    "resultTwoId": 1,
                    "Job": "Electrician",
                },
              ]
           },
           {
              "id":2,
              "resultOneId":1,
              "startDate":"2021-02-08T09:00:00.000Z",
              "endDate":"2021-02-17T18:00:00.000Z",
              "created_at":"2021-12-08T17:53:12.000Z",
               "resultThress": [
                {
                    "id": 3,
                    "resultTwoId": 2,
                    "Job": "Painter",
                },
              ]
           },
      ]
   },
   {
      "id":2,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"12",
      "created_at":"2021-12-08T17:53:12.000Z",
      "resultTwos": [
            {
              "id":3,
              "resultOneId":2,
              "startDate":"2021-02-08T09:00:00.000Z",
              "endDate":"2021-02-17T18:00:00.000Z",
              "duration":"5 hours",
              "created_at":"2021-12-08T17:53:12.000Z",
               "resultThress": [
                {
                    "id": 3,
                    "resultTwoId": 2,
                    "Job": "Painter",
                },
           },
      ]
   },
]

So I have the first part sorted, this puts the resultsTwos within the first results.

resultOnes.map( one => {return { ...one, resultTwos: resultTwos.filter(two => two.resultOneId === one.id)}})

I am struggling however with getting the resultThress to be part of the resultTwos, like in my example output above.

How could this be achieved? Been trying to do a nested map but cant seem to get it working.

Any advice appreciated

Thanks

Answer 1

To use your method, you can simply add a map after your filter on resultTwos and repeat the same logic:

resultOnes.map( aObj => {
  return { 
    ...aObj,
    resultTwos: resultTwos.filter(two => {two.resultOneId === aObj.id).map( bObj => {
      return {
        ...bObj,
        resultThrees: c.filter(cObj => cObj.resultTwoId === bObj.id)
      }
    }
  }
})

you could also do the three-into-two mapping separately, which may make it slightly more readable if you come back in future:

const mergedTwos = resultTwos.map( two => {
  ...two,
  resultThrees: c.filter(cObj => cObj.resultTwoId === bObj.id)
});

resultOnes.map( one => {
  return { 
    ...one,
    resultTwos: mergedTwos
  }
})

if there's going to be more layers it might be worth digging into array.reduce()

Answer 2

const a = [
  {
    "id": 1,
    "name": "Some Name",
    "description": "Some description",
    "currency": "USD",
    "price": "350",
    "created_at": "2021-12-08T17:53:12.000Z"
  },
  {
    "id": 2,
    "name": "Some Name",
    "description": "Some description",
    "currency": "USD",
    "price": "12",
    "created_at": "2021-12-08T17:53:12.000Z"
  }
];

const b = [
  {
    "id": 1,
    "resultOneId": 1,
    "startDate": "2022-02-01T16:00:00.000Z",
    "endDate": "2022-02-08T18:00:00.000Z",
    "created_at": "2021-12-08T17:53:12.000Z"
  },
  {
    "id": 2,
    "resultOneId": 1,
    "startDate": "2021-02-08T09:00:00.000Z",
    "endDate": "2021-02-17T18:00:00.000Z",
    "created_at": "2021-12-08T17:53:12.000Z"
  },
  {
    "id": 3,
    "resultOneId": 2,
    "startDate": "2021-02-08T09:00:00.000Z",
    "endDate": "2021-02-17T18:00:00.000Z",
    "created_at": "2021-12-08T17:53:12.000Z"
  }
];

const c = [
  {
    "id": 1,
    "resultTwoId": 1,
    "Job": "Technician"
  },
  {
    "id": 2,
    "resultTwoId": 1,
    "Job": "Electrician"
  },
  {
    "id": 3,
    "resultTwoId": 2,
    "Job": "Painter"
  },
  {
    "id": 4,
    "resultTwoId": 3,
    "Job": "Painter"
  }
];

const result = a.map(aObj => ({
    ...aObj,
    resultTwos: b.filter(bObj => bObj.resultOneId === aObj.id).map(bObj => ({
        ...bObj,
        resultThrees: c.filter(cObj => cObj.resultTwoId === bObj.id)

    }))
  }));

console.log("result", result);