How to convert nested array pairs to objects in an array in JavaScript ?

When working with complex data structures, you often need to convert nested array pairs into objects. This is common when processing form data or API responses that use key-value pair arrays.

Problem Statement

Suppose we have an array of arrays like this:

const arr = [
    [
        ['firstName', 'Joe'],
        ['lastName', 'Blow'],
        ['age', 42],
        ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'],
        ['lastName', 'Jenkins'],
        ['age', 36],
        ['role', 'manager']
    ]
];

console.log("Input array:", arr);

Input array: [
  [
    [ 'firstName', 'Joe' ],
    [ 'lastName', 'Blow' ],
    [ 'age', 42 ],
    [ 'role', 'clerk' ]
  ],
  [
    [ 'firstName', 'Mary' ],
    [ 'lastName', 'Jenkins' ],
    [ 'age', 36 ],
    [ 'role', 'manager' ]
  ]
]

We need to convert this into an array of objects where each sub-array becomes an object with key-value pairs.

Using Object.fromEntries() (Recommended)

The modern approach uses Object.fromEntries() which directly converts key-value pairs to objects:

const arr = [
    [
        ['firstName', 'Joe'],
        ['lastName', 'Blow'],
        ['age', 42],
        ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'],
        ['lastName', 'Jenkins'],
        ['age', 36],
        ['role', 'manager']
    ]
];

const convertToObjects = (nestedArray) => {
    return nestedArray.map(pairs => Object.fromEntries(pairs));
};

const result = convertToObjects(arr);
console.log(result);

[
  { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
  { firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' }
]

Using forEach() Method

For a more explicit approach, you can iterate through each pair manually:

const convertWithForEach = (nestedArray) => {
    return nestedArray.map(pairs => {
        const obj = {};
        pairs.forEach(([key, value]) => {
            obj[key] = value;
        });
        return obj;
    });
};

const result2 = convertWithForEach(arr);
console.log(result2);

[
  { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
  { firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' }
]

Using reduce() Method

Another approach using reduce() for more control over the transformation:

const convertWithReduce = (nestedArray) => {
    return nestedArray.map(pairs => {
        return pairs.reduce((obj, [key, value]) => {
            obj[key] = value;
            return obj;
        }, {});
    });
};

const result3 = convertWithReduce(arr);
console.log(result3);

[
  { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
  { firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' }
]

Comparison

Conclusion

Object.fromEntries() is the most concise and efficient method for converting nested array pairs to objects. Use forEach() or reduce() when you need broader browser compatibility or additional processing logic.