Merge two arrays using use state hook in React

Question

First of all, I use React.js in my project. I want to merge two arrays using use state hook. I have two arrays. The first array is

[
  {
    "id": 1,
    "count": "2"
  },
  {
    "id": 2,
    "count": "1"
  }
  {
    "id": 3,
    "count": "1"
  }
  {
    "id": 4,
    "count": "1"
  }
  {
    "id": 5,
    "count": "1"
  },
]

And the second array is

[
  {
    "id": 1,
    "name": "Laptop"
  },
  {
    "id": 2,
    "name": "SSD"
  },
  {
    "id": 3,
    "name": "Keyboard"
  },
  {
    "id": 4,
    "name": "Mouse"
  },
  {
    "id": 5,
    "name": "Speaker"
  }
]

And I want to merge these arrays according to their mutual id. The result should be something like this,

[
  {
    "id": 1,
    "count": "2",
    "name": "Laptop"
  },
  {
    "id": 2,
    "count": "1",
    "name": "SSD"
  },
  {
    "id": 3,
    "count": "1",
    "name": "Keyboard"
  },
  {
    "id": 4,
    "count": "1",
    "name": "Mouse"
  },
  {
    "id": 5,
    "count": "1",
    "name": "Speaker"
  }
]

How can I merge these arrays?

score 4 · Accepted Answer · answered Sep 02 '22 at 14:25

Try like this:

const A = [ { id: 1, count: "2", }, { id: 2, count: "1", }, { id: 3, count: "1", }, { id: 4, count: "1", }, { id: 5, count: "1", }, ]; const B = [ { id: 1, name: "Laptop", }, { id: 2, name: "SSD", }, { id: 3, name: "Keyboard", }, { id: 4, name: "Mouse", }, { id: 5, name: "Speaker", }, ];

const output = A.map((itemA) => ({
  ...itemA,
  ...B.find((itemB) => itemB.id === itemA.id),
}));

console.log(output);

Olivier Boissé · Answer 2 · 2022-09-02T15:31:03.233

const arr1 = [
  {"id": 1, "count": "2"},
  {"id": 2, "count": "1"},
  {"id": 3, "count": "1"},
  {"id": 4, "count": "1"},
  {"id": 5, "count": "1"}
]

const arr2 = [
  {"id": 1, "name": "Laptop"},
  {"id": 2, "name": "SSD"},
  {"id": 3, "name": "Keyboard"},
  {"id": 4, "name": "Mouse"},
  {"id": 5, "name": "Speaker"}
]

const length = Math.max(arr1.length, arr2.length);
const result = [...Array(length).keys()].map(i => ({
  ...arr1[i],
  ...arr2[i]
}));

console.log(result);

Merge two arrays using use state hook in React

2 Answers2