How can I join two arrays of objects in JavaScript?

Question

What is the best way to join data in JavaScript? Are there libraries like eg Pandas in Python or is iteration the way to go? I have two arrays with different objects inside. The list orders contains information about orders in general and the list ordersPayed contains the information whether an order was already payed + the amount etc.

 const orders = [ { orderId: 1, orderDate: '2018-01-01', orderAmount: 100 }, { orderId: 2, orderDate: '2018-02-01', orderAmount: 100 }, { orderId: 3, orderDate: '2018-03-01', orderAmount: 100 }, { orderId: 4, orderDate: '2018-03-01', orderAmount: 100 }]; const ordersPayed = [ { orderId: 1, payedAmount: 90, debitorName: 'abc' }, { orderId: 3, payedAmount: 80, debitorName: 'abc' }, { orderId: 6, payedAmount: 90, debitorName: 'abc' }]; let newOrderList = []; for (i = 0; i < orders.length; i++) { for (j = 0; j < ordersPayed.length; j++) { if (orders[i].orderId == ordersPayed[j].orderId) { newOrderList.push(orders[i].orderId); newOrderList.push(orders[i].orderDate); newOrderList.push(orders[i].orderAmount); newOrderList.push(ordersPayed[j].payedAmount); newOrderList.push(ordersPayed[j].debitorName); } else if (j == (ordersPayed.length-1)) { newOrderList.push(orders[i].orderId); newOrderList.push(orders[i].orderDate); newOrderList.push(orders[i].orderAmount); newOrderList.push('not_payed_yet'); newOrderList.push('not_known_yet'); } } } console.log(newOrderList); 

The matching is done by the key orderId . At the end I want to have a new list with all orders + the corresponding info whether they were already payed or not.

The code above is my approach to go, but I don't know if this is good for performance reasons and whether there are more pitfalls. So I thought of a matching library or something similar.

Unfortunately this doesn't work 100% correctly. The result should look something like this:

[{
    orderId: 1,
    orderDate: '2018-01-01',
    orderAmount: 100,
    payedAmount: 90
},
{
    orderId: 2,
    orderDate: '2018-02-01',
    orderAmount: 100,
    payedAmount: 'not_payed_yet'
},
{
    orderId: 3,
    orderDate: '2018-03-01',
    orderAmount: 100,
    payedAmount: 80
},
{
    orderId: 4,
    orderDate: '2018-03-01',
    orderAmount: 100,
    payedAmount: 'not_payed_yet'
}]

Anybody got any tips?

Answer 1

const newOrderList = orders.map((order, index) => {
   let payedOrder = ordersPayed.find(o => o.orderId === order.orderId);
   return Object.assign({}, order, payedOrder)
});

Answer 2

You can try following solution:

// Returns an array with order objects, which contain all information
let newOrderList = orders.map((order, index) => {
    let payedOrder = ordersPayed.find(o => o.orderId === order.orderId);

    // Returns a new object to not manipulate the original one
    return {
        orderId: order.orderId,
        orderDate: order.orderDate, 
        orderAmount: order.orderAmount, 
        payedAmount: payedOrder ? payedOrder.payedAmount : 'not_payed_yet', 
        debitorName: payedOrder ? payedOrder.debitorName: 'not_known_yet'
    }
});

Answer 3

Using lodash and ES6 arrow notation the solution can become quite short:

 // Array of Javascript Objects 1: const orders = [{ orderId: 1, orderDate: '2018-01-01', orderAmount: 100 }, { orderId: 2, orderDate: '2018-02-01', orderAmount: 100 }, { orderId: 3, orderDate: '2018-03-01', orderAmount: 100 }, { orderId: 4, orderDate: '2018-03-01', orderAmount: 100 } ]; // Array of Javascript Objects 2: const ordersPayed = [{ orderId: 1, payedAmount: 90, debitorName: 'abc' }, { orderId: 3, payedAmount: 80, debitorName: 'abc' }, { orderId: 6, payedAmount: 90, debitorName: 'abc' } ]; var merged = _.merge(_.keyBy(orders, 'orderId'), _.keyBy(ordersPayed, 'orderId')); const newArr = _.map(merged, o => _.assign({ "payedAmount": "not_payed_yet", "debitorName": "not_known_yet" }, o)); var result = _.values(newArr); console.log(result); 

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

 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script> 

Answer 4

For your problem, I would use the Array.reduce with Array.find :

const newOrderList = orders.reduce((acc, order) => {
    const { orderId } = order;
    const orderPayed =  ordersPayed.find((orderPayed) => orderPayed.orderId === orderId);

    if (orderPayed) {
        return [
            ...acc,
            {
                ...order,
                ...orderPayed,
            }
        ];
    }

    return [
        ...acc,
        {
            ...order,
        },
    ];
}, []);

Answer 5

There is a small error in you code. The else if there is not going to work the way you want, because you will always push a not found entry to the new array, whenever the last match fails. You could try this adjusted version of your code:

 const orders = [ { orderId: 1, orderDate: '2018-01-01', orderAmount: 100 }, { orderId: 2, orderDate: '2018-02-01', orderAmount: 100 }, { orderId: 3, orderDate: '2018-03-01', orderAmount: 100 }, { orderId: 4, orderDate: '2018-03-01', orderAmount: 100 }]; const ordersPayed = [ { orderId: 1, payedAmount: 90, debitorName: 'abc' }, { orderId: 3, payedAmount: 80, debitorName: 'abc' }, { orderId: 6, payedAmount: 90, debitorName: 'abc' }]; let newOrderList = []; for (i = 0; i < orders.length; i++) { let payed = false; for (j = 0; j < ordersPayed.length; j++) { if (orders[i].orderId == ordersPayed[j].orderId) { newOrderList.push({ orderId: orders[i].orderId, orderDate: orders[i].orderDate, orderAmount: orders[i].orderAmount, payedAmount: ordersPayed[j].payedAmount, debitorName: ordersPayed[j].debitorName }); payed = true; } } if (!payed) { newOrderList.push({ orderId: orders[i].orderId, orderDate: orders[i].orderDate, orderAmount: orders[i].orderAmount, payedAmount: 'not_payed_yet', debitorName: 'not_known_yet' }); } } console.log(newOrderList); 

But keep in mind that this is only going to work if you have a 1:1 relationship between the datasets. Meaning if you can have multiple entries in ordersPayed for an entry in orders , the result is also going to have multiple entries for those orders.