push the contents of array into another array without looping

Question

Here's a simple piece of JavaScript where I want to add the contents of orders.foo and orders2.foo to a single-dimensional ordersArr.

let _ = require('underscore');

let ordersArr = [];
let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

ordersArr = _.map(orders.foo, order => order)

orders2 = {
        foo: [
                {x: 2, b: 3},
                {y: 5, c: 4},
                {a: 3, d: 6}
        ]
}


let tOrders = _.map(orders2.foo, order => order);
ordersArr.push(tOrders)

console.log(ordersArr);

The problem with this code is that push in this case creates a multi-dimensional array:

Output

[
  { x: 1, b: 2 },
  { y: 1, c: 3 },
  { a: 2, d: 4 },
  [ { x: 2, b: 3 }, { y: 5, c: 4 }, { a: 3, d: 6 } ]
]

How do I iterate the contents of orders.foo and orders2.foo and have their results as one single dimension array?

Answer 1

I'll add one more flavor to the list. You can create a shallow copy of an array using the built-in slice method, which has been with us for a very long time:

var ordersArr = orders.foo.slice();

Now you can add the contents of the other array using push and apply:

ordersArr.push.apply(ordersArr, orders2.foo);

Et voilá, ordersArr is now a one-dimensional array containing all elements of both orders.foo and orders2.foo. Works even in ES3!

For inspiration, you can find lots of nice little tricks like this in the Underscore source code.

Answer 2

You can use concat() to merge the arrays and create a single new array:

let tOrders = orders.foo.concat(orders2.foo);

let ordersArr = [];
let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

ordersArr = _.map(orders.foo, order => order)

orders2 = {
    foo: [
        {x: 2, b: 3},
        {y: 5, c: 4},
        {a: 3, d: 6}
    ]
}

let tOrders = orders.foo.concat(orders2.foo);
console.log(tOrders)

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>

Another option using flat()

let ordersArr = [];
let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

orders2 = {
    foo: [
        {x: 2, b: 3},
        {y: 5, c: 4},
        {a: 3, d: 6}
    ]
}

let tOrders = [orders.foo, orders2.foo].flat();
console.log(tOrders)

Answer 3

The spread operator mentioned above is the best 2021 way to do it.

let ordersArr = [...orders.foo, ...orders2.foo];

Answer 4

Using underscore _.flatten:

const 
  orders = { foo: [ {x: 1, b: 2}, {y: 1, c: 3}, {a: 2, d: 4} ] },
  orders2 = { foo: [ {x: 2, b: 3}, {y: 5, c: 4}, {a: 3, d: 6} ] };
  
const ordersArr = _.flatten([orders.foo, orders2.foo]);

console.log(ordersArr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>

Using javascript spread operator:

const 
  orders = { foo: [ {x: 1, b: 2}, {y: 1, c: 3}, {a: 2, d: 4} ] },
  orders2 = { foo: [ {x: 2, b: 3}, {y: 5, c: 4}, {a: 3, d: 6} ] };
  
const ordersArr = [...orders.foo, ...orders2.foo];

console.log(ordersArr);

Using javascript Array#concat:

const 
  orders = { foo: [ {x: 1, b: 2}, {y: 1, c: 3}, {a: 2, d: 4} ] },
  orders2 = { foo: [ {x: 2, b: 3}, {y: 5, c: 4}, {a: 3, d: 6} ] };
  
const ordersArr = orders.foo.concat(orders2.foo);

console.log(ordersArr);

Answer 5

Immutable merge of arrays

Creates a new array.

1. Merge using the spread operator

let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

let orders2 = {
    foo: [
        {x: 2, b: 3},
        {y: 5, c: 4},
        {a: 3, d: 6}
     ]
}

const mergeResult = [...orders.foo, ...orders2.foo];
console.log(mergeResult);

2. Merge using array.concat() method

let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

let orders2 = {
    foo: [
        {x: 2, b: 3},
        {y: 5, c: 4},
        {a: 3, d: 6}
     ]
}

const mergeResult = orders.foo.concat(orders2.foo);
console.log(mergeResult);

Mutable merge of arrays

Merge it into existing array.

1. Merge using array.push() method

let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

let orders2 = {
    foo: [
        {x: 2, b: 3},
        {y: 5, c: 4},
        {a: 3, d: 6}
     ]
}

orders.foo.push(...orders2.foo);
console.log(orders.foo);

Answer 6

You can spread the content of both arrays into the new array

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// prints [1,2,3,4,5,6]

Spreading arr2 into arr1 also works.

arr1.push(...arr2);
console.log(arr1);
// prints [1,2,3,4,5,6]

So changing

ordersArr.push(tOrders)

to

ordersArr.push(...tOrders);

should work.

For a full answer:

let ordersArr = [];
let orders = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
}

orders2 = {
        foo: [
                {x: 2, b: 3},
                {y: 5, c: 4},
                {a: 3, d: 6}
        ]
}

ordersArr.push(...orders.foo, ...orders2.foo);

Answer 7

Use Array.concat()

let orders1 = {
    foo: [
        {x: 1, b: 2},
        {y: 1, c: 3},
        {a: 2, d: 4}
    ]
};

let orders2 = {
    foo: [
        {x: 2, b: 3},
        {y: 5, c: 4},
        {a: 3, d: 6}
    ]
};

console.log( orders1.foo.concat(orders2.foo) );

Answer 8

i think this will work for you.

let tOrders = _.map(orders2.foo, order => order);
tOrders.foreach((element)=>{
ordersArr.push(element)
})
console.log(ordersArr);