We have same two arrays to groupby theme by index. Two arrays with same length and different value like blow. How to groupby two array with their index by ES6 reduce or lodash?

array1 = [1,2,3,4] OR [{a:1},{b:2},{c:3},{d:4}]
array2 = [5,6,7,8] OR [{e:5},{f:6},{g:7},{h:8}]

finalArray = [[1,5],[2,6],[3,7],[4,8]]

I'm trying with different ways like group by with reduce in es6 or lodash concat but i can't find best solution for my problems.

We have same two arrays to groupby theme by index. Two arrays with same length and different value like blow. How to groupby two array with their index by ES6 reduce or lodash?

array1 = [1,2,3,4] OR [{a:1},{b:2},{c:3},{d:4}]
array2 = [5,6,7,8] OR [{e:5},{f:6},{g:7},{h:8}]

finalArray = [[1,5],[2,6],[3,7],[4,8]]

I'm trying with different ways like group by with reduce in es6 or lodash concat but i can't find best solution for my problems.

• javascript
• ecmascript-6
• lodash

• 2 What you are asking for is usually called zip, so if lodash has a zip function use that. – Paul Rooney Commented Nov 20, 2019 at 5:30

3 Answers 3

Try this:

let array1 = [1, 2, 3, 4];
let array2 = [5, 6, 7, 8];
let res = array1.map((value, index) => {
  return [value, array2[index]]
})
console.log(res);

If it is array of objects

let array1 = [{a:1},{b:2},{c:3},{d:4}];
let array2 = [{e:5},{f:6},{g:7},{h:8}];

let res = array1.map((value, index) => {
  return [Object.values(value)[0],Object.values(array2[index])[0]]
})
console.log(res)

Use lodashes zip function

// _ is lodash

const array1 = [1,2,3,4]
const array2 = [5,6,7,8]

console.log(_.zip(array1, array2))

result

[ [ 1, 5 ], [ 2, 6 ], [ 3, 7 ], [ 4, 8 ] ]

If you are working with the array of objects. Get just the values using Object.values and grab the 0th element.

const array3 = [{a:1},{b:2},{c:3},{d:4}];
const array4 = [{e:5},{f:6},{g:7},{h:8}];

function firstval(ob){
  return Object.values(ob)[0]
}

console.log(_.zip(array3.map(firstval), array4.map(firstval)))

You can also write your own zip. This is a limited version. That handles only 2 elements, doesn't accept or return generators etc.

It could easily be extended to take a spread operator and therefore any number of arguments. You don't seem to need that level of flexibility though.

function zip(a, b) {
  const num = Math.min(a.length, b.length);
  const result = [];
  for(i = 0; i < num; i++) result.push([a[i], b[i]]);
  return result;
}

Following code works under these assumptions:

1. all input arrays have same length
2. if array element is object, it has only one property

function getValue(element) {
  if (typeof element === 'object') {
    return Object.values(element).pop()
  } else {
    return element
  }
}

function zipArrays(arr1, arr2) {
  return arr1.reduce((acc, elm1, index) => {
    const elm2 = arr2[index]
    const elm = [getValue(elm1), getValue(elm2)]
    acc.push(elm)
    return acc
  }, [])
}

// usage:
const array1 = [1,2,3,4] // OR [{a:1},{b:2},{c:3},{d:4}]
const array2 = [5,6,7,8] // OR [{e:5},{f:6},{g:7},{h:8}]
const finalArray = zipArrays(array1, array2)