將物件陣列與嵌套合并

我在組合基于 id 的物件陣列時遇到了一個小問題。我有三個資料集（洗掉資料以減少長度）

一套

[
   {
      "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",
   },
]

設定二

[
   {
      "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",
   },
]

設定三

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

本質上，第二組是第一組的孩子，第三組是第二組的智利。我的目標是這樣的輸出

[
   {
      "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",
                },
           },
      ]
   },
]

所以我對第一部分進行了排序，這將 resultsTwos 放在第一個結果中。

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

然而，我正在努力讓 resultThress 成為 resultTwos 的一部分，就像我上面的示例輸出一樣。

這怎么可能實作？一直在嘗試制作嵌套地圖，但似乎無法使其正常作業。

任何建議表示贊賞

謝謝

uj5u.com熱心網友回復：

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);

uj5u.com熱心網友回復：

要使用您的方法，您只需在onmap之后添加一個并重復相同的邏輯：filterresultTwos

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)
      }
    }
  }
})

您也可以分別進行三對二映射，如果您將來回來，這可能會使它更具可讀性：

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

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

如果會有更多層，可能值得深入研究array.reduce()

標籤：javascript ecmascript-6

上一篇：使用串列中的選擇選項更改特定專案的顏色

下一篇：子組件未使用更新的道具重新渲染