JS Combine 2 separate array with keys

Question

I have this code below consisting of 2 arrays with key pair values. What i'm currently trying to achieve is to combine this arrays into something like this.

[{"id" : "1" , "alphabet" : "A"}, {"id" : "2" , "alphabet" : "B"}, {"id" : "3" , "alphabet" : "C"}, ]

Is there any easy way to achieve this? Any help would be greatly appreciated thank you.

    var arr = [1,2,3,4,5,6,7,8,9]
    var array = arr.map((x) => ({ id:x }));
    console.log(array);


   var arr2 = ['A','B','C','D','E','F','G','H','I']
    var array2 = arr2.map((x) => ({ alphabet:x }));
    console.log(array2);

Nikhil Aggarwal · Accepted Answer · 2018-07-17 05:39:06Z

5

Use Array.map

var arr = [1,2,3,4,5,6,7,8,9]
var arr2 = ['A','B','C','D','E','F','G','H','I']

var result = arr.map((v,i) => ({id:v, alphabet:arr2[i]}));
console.log(result);

answered Jul 17, 2018 at 5:39

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nishant Dixit Over a year ago

What happen if arr and arr2 have different length?

Nikhil Aggarwal Over a year ago

@NishantDixit - I am not sure whether this is even a test case with the OP. Let OP clarify on this and also share the desired result for it.

Mamun · Accepted Answer · 2018-07-17 05:55:10Z

Pass index as the second parameter in map() so that you can use that to take the number from the specific index. Try the following:

var arr = [1,2,3,4,5,6,7,8,9]

var arr2 = ['A','B','C','D','E','F','G','H','I']
var array2 = arr2.map((x,i) => ({id:arr[i], alphabet:x }));
console.log(array2);

OR: if the length of the arrays are not same:

var arr = [1,2,3,4,5]

var arr2 = ['A','B','C','D','E','F','G','H','I']
var array2 = arr2.map(function(x,i){
  arr[i] = arr[i] || '';
  return {id:arr[i], alphabet:x}
});

console.log(array2);

Nishant Dixit · Accepted Answer · 2018-07-17 05:42:42Z

0

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var arr2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
var finalResult = arr.reduce((array, val, index) => {
    arr2[index] ? array.push({
        id: val,
        alphabet: arr2[index]
    }) : null;
    return array;
}, []);


console.log(finalResult);

answered Jul 17, 2018 at 5:42

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

Comments

Nina Scholz · Accepted Answer · 2018-07-17 06:34:09Z

A much more easier way with different length of value arrays and with the potential to add some more arrays is to use an object with the keys as wanted key for the properties for the wanted new objects.

It works by using short hand properties and later get the property name as key for the new object and the value as array for single values of the new object.

Inside of reduce, all values of the arrays are combined to a new object and assigned to the object at the same index. If that object does not exist, a new object is used.

var id = [1, 2, 3, 4, 5, 6, 7, 8, 9],
    alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    result = Object
        .entries({ id, alphabet })
        .reduce((r, [k, values]) => {
            values.forEach((v, i) => Object.assign(r[i] = r[i] || {}, { [k]: v }));
            return r;
        }, []);
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

JS Combine 2 separate array with keys

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related