How to merge two different array of objects using JavaScript?

Suppose, we have two different array of objects that contains information about the questions answered by some people:

const arr1 = [
    { PersonalID: '11', questionNumber: '1', value: 'Something' },
    { PersonalID: '12', questionNumber: '2', value: 'whatever' },
    { PersonalID: '13', questionNumber: '3', value: 'anything' },
    { PersonalID: '14', questionNumber: '4', value: 'null' }
];

const arr2 = [
    { questionNumber: '2', chID: '111', cValue: 'red' },
    { questionNumber: '2', chID: '112', cValue: 'green'},
    { questionNumber: '2', chID: '113', cValue: 'blue' },
    { questionNumber: '3', choiceID: '114', cValue: 'yellow'},
    { questionNumber: '4', choiceID: '115', cValue: 'red'}
];

console.log("Array 1:", arr1);
console.log("Array 2:", arr2);

Array 1: [
  { PersonalID: '11', questionNumber: '1', value: 'Something' },
  { PersonalID: '12', questionNumber: '2', value: 'whatever' },
  { PersonalID: '13', questionNumber: '3', value: 'anything' },
  { PersonalID: '14', questionNumber: '4', value: 'null' }
]
Array 2: [
  { questionNumber: '2', chID: '111', cValue: 'red' },
  { questionNumber: '2', chID: '112', cValue: 'green' },
  { questionNumber: '2', chID: '113', cValue: 'blue' },
  { questionNumber: '3', choiceID: '114', cValue: 'yellow' },
  { questionNumber: '4', choiceID: '115', cValue: 'red' }
]

We need to merge these arrays by matching the questionNumber field. Objects from arr1 should include corresponding choices from arr2 in a choice property.

Expected Output Structure

The final output should group data by unique persons, with matching choices:

[
    {
        PersonalID: "11",
        questionNumber: "1", 
        value: "Something"
    },
    {
        PersonalID: "12",
        questionNumber: "2",
        value: "whatever",
        choice: [
            { questionNumber: "2", chID: "111", cValue: "red" },
            { questionNumber: "2", chID: "112", cValue: "green" },
            { questionNumber: "2", chID: "113", cValue: "blue" }
        ]
    },
    {
        PersonalID: "13", 
        questionNumber: "3",
        value: "anything",
        choice: [
            { questionNumber: "3", choiceID: "114", cValue: "yellow" }
        ]
    },
    {
        PersonalID: "14",
        questionNumber: "4", 
        value: "null",
        choice: [
            { questionNumber: "4", choiceID: "115", cValue: "red" }
        ]
    }
]

Solution Using forEach

const arr1 = [
    { PersonalID: '11', questionNumber: '1', value: 'Something' },
    { PersonalID: '12', questionNumber: '2', value: 'whatever' },
    { PersonalID: '13', questionNumber: '3', value: 'anything' },
    { PersonalID: '14', questionNumber: '4', value: 'null' }
];

const arr2 = [
    { questionNumber: '2', chID: '111', cValue: 'red' },
    { questionNumber: '2', chID: '112', cValue: 'green'},
    { questionNumber: '2', chID: '113', cValue: 'blue' },
    { questionNumber: '3', choiceID: '114', cValue: 'yellow'},
    { questionNumber: '4', choiceID: '115', cValue: 'red'}
];

const mergeArrays = (arr1 = [], arr2 = []) => {
    const result = arr1.map(obj => ({ ...obj })); // Create deep copy
    
    result.forEach(obj => {
        const matchingChoices = arr2.filter(choice => 
            choice.questionNumber === obj.questionNumber
        );
        
        if (matchingChoices.length > 0) {
            obj.choice = matchingChoices;
        }
    });
    
    return result;
};

const mergedData = mergeArrays(arr1, arr2);
console.log(JSON.stringify(mergedData, null, 2));

[
  {
    "PersonalID": "11",
    "questionNumber": "1",
    "value": "Something"
  },
  {
    "PersonalID": "12",
    "questionNumber": "2", 
    "value": "whatever",
    "choice": [
      {
        "questionNumber": "2",
        "chID": "111",
        "cValue": "red"
      },
      {
        "questionNumber": "2",
        "chID": "112",
        "cValue": "green"
      },
      {
        "questionNumber": "2",
        "chID": "113", 
        "cValue": "blue"
      }
    ]
  },
  {
    "PersonalID": "13",
    "questionNumber": "3",
    "value": "anything",
    "choice": [
      {
        "questionNumber": "3",
        "choiceID": "114",
        "cValue": "yellow"
      }
    ]
  },
  {
    "PersonalID": "14",
    "questionNumber": "4",
    "value": "null", 
    "choice": [
      {
        "questionNumber": "4",
        "choiceID": "115",
        "cValue": "red"
      }
    ]
  }
]

Alternative: Using reduce

A more functional approach using reduce:

const mergeWithReduce = (arr1, arr2) => {
    return arr1.reduce((result, obj) => {
        const newObj = { ...obj };
        const choices = arr2.filter(choice => 
            choice.questionNumber === obj.questionNumber
        );
        
        if (choices.length > 0) {
            newObj.choice = choices;
        }
        
        result.push(newObj);
        return result;
    }, []);
};

const mergedWithReduce = mergeWithReduce(arr1, arr2);
console.log("Merged with reduce:", mergedWithReduce.length, "items");

Merged with reduce: 4 items

Key Points

• Use filter() to find matching objects based on questionNumber
• Create copies of objects to avoid mutating original arrays
• Only add choice property when matches exist
• Both forEach and reduce approaches work effectively

Conclusion

This solution merges two object arrays by matching a common field (questionNumber). The filter method efficiently finds related choices, while spread operator ensures data integrity.