How to combine array to array multidimensional with object and key

Question

How to combine 2 array to be 1 array with object and key. array1 = [a, b, c , d] array2 = [z, y, x, w] I want to be an array like result = [[foo: a, bar: z], [foo: b, bar: y], [foo: c, bar: x], [foo: d, bar: w]] . I just can combine without object and key like this:

var array1 = [a, b, c , d];
var array2 = [z, y, x, w];
var result = [];
result = $.map(array1, function (el, idx) {
  return [[el, array2[idx]]];
});
output: [[a, z],[b, y],[c, x],[d, w]];

Answer 1

If you want an array of objects with keys foo and bar (which it more or less looks like you do), you are almost there. You just need to make an object with map() rather than an array:

 var array1 = ['a', 'b', 'c' , 'd']; var array2 = ['z', 'y', 'x', 'w']; let result = array1.map((item, index) => ({foo:item, bar: array2[index]})) console.log(result) 

Answer 2

Clean-up

First of all, a little clean-up of your initial version:

 var array1 = ['a', 'b', 'c', 'd']; var array2 = ['z', 'y', 'x', 'w']; var result = array1.map(function (el, idx) { return [[el, array2[idx]]]; }); console.log(result) 

 .as-console-wrapper {height: 100vh !important;} 

Note that the array values here are listed as strings, just to show what's happening. But also note that we can use the map method of Arrays rather than jQuery's version.

Changing to objects

But now we can easily change this to get the output you are looking for:

 var array1 = ['a', 'b', 'c', 'd']; var array2 = ['z', 'y', 'x', 'w']; var result = array1.map(function (el, idx) { return {foo: el, bar: array2[idx]}; }); console.log(result) 

 .as-console-wrapper {height: 100vh !important;} 

More general

The operation of pair-wise combining two lists is often called zip -- think of it like a zipper on the two lists.

We can use something much like your code to write a naive zip function:

 const zip = function(xs, ys) { return xs.map(function(x, i) {return [x, ys[i]]}) } const array1 = ['a', 'b', 'c' , 'd']; const array2 = ['z', 'y', 'x', 'w']; const result = zip(array1, array2) console.log(result) 

 .as-console-wrapper {height: 100vh !important;} 

A general function for your problem

Combining the abstraction from this version with the expansion we used in creating objects, we could write a function zipWith that accepts the two lists as well as a function used to combine an element from each into a new value:

 const zipWith = function(fn) { return function(xs, ys) { return xs.map(function(x, i) {return fn(x, ys[i]);}) } } const array1 = ['a', 'b', 'c' , 'd']; const array2 = ['z', 'y', 'x', 'w']; const foobar = (x, y) => ({foo: x, bar: y}) const result = zipWith(foobar)(array1, array2) console.log(result) 

 .as-console-wrapper {height: 100vh !important;} 

Posible extensions

This function has at least one drawback: if the lists are different lengths, your function might have to handle possible undefined values in either of its parameters. We could fix this by working only up to the length of the shorter list. This is not hard to do, but the code would not be as simple. If you are interested in that, we can work through how to do it.