Javascript: group JSON objects using specific key

Question

I have the following JSON object and wanted to merge them by OrderID, making the items into array of objects:

[
  {
    "OrderID":"999123",
    "ItemCode":"TED-072",
    "ItemQuantity":"1",
    "ItemPrice":"74.95",
  },
  {
    "OrderID":"999123",
    "ItemCode":"DY-FBBO",
    "ItemQuantity":"2",
    "ItemName":"DOIY Foosball Bottle Opener > Red",
    "ItemPrice":"34.95",
  }
]

and I'm wondering how in Javascript to merge the items on the same order...like this:

[{
    "OrderID": "999123",
        "Items": [{
        "ItemCode": "DY-FBBO",
            "ItemQuantity": "2",
            "ItemName": "DOIY Foosball Bottle Opener > Red",
            "ItemPrice": "34.95"
    }, {
        "ItemCode": "TED-072",
            "ItemQuantity": "1",
            "ItemName": "Ted Baker Womens Manicure Set",
            "ItemPrice": "74.95"
    }]
}]

Answer 1

I suggest you use javascript library like underscorejs/lazyjs/lodash to solve this kind of thing.

Here is the example on using underscorejs :

var data = [{
    "OrderID":"999123",
    "ItemCode":"TED-072",
    "ItemQuantity":"1",
    "ItemPrice":"74.95",
}, {
    "OrderID":"999123",
    "ItemCode":"DY-FBBO",
    "ItemQuantity":"2",
    "ItemName":"DOIY Foosball Bottle Opener > Red",
    "ItemPrice":"34.95",
}]

var result = _.chain(data).groupBy(function (e) {
    return e.OrderID;
}).map(function (val, key) {
    return {
        OrderID: key,
        Items: _.map(val, function (eachItem) {
            delete eachItem.OrderID;
            return eachItem;
        })
    };
}).value();

Working example:

 var data = [{ "OrderID":"999123", "ItemCode":"TED-072", "ItemQuantity":"1", "ItemPrice":"74.95", }, { "OrderID":"999123", "ItemCode":"DY-FBBO", "ItemQuantity":"2", "ItemName":"DOIY Foosball Bottle Opener > Red", "ItemPrice":"34.95", }]; var result = _.chain(data).groupBy(function (e) { return e.OrderID; }).map(function (val, key) { return { OrderID: key, Items: _.map(val, function (eachItem) { delete eachItem.OrderID; return eachItem; }) }; }).value(); document.write(JSON.stringify(result)); 

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

Answer 2

Lodash is a great Javascript Utility library that can help you in this case. Include the latest version of lodash in your code and group the objects like this:

var mergedOrders = _.groupBy(OriginalOrders, 'OrderID');

Answer 3

It seems you'll have to do a function that, for each entry, will check if it match

try this :

    // your array is oldArr
var newArr = []
for (var i=0;i<oldArr.length;i++){
    var found = false;
    for(var j=0;j<newArr.length;j++){
        if(oldArr[i]["OrderID"]==newArr[j]["OrderID"]){
            newArr[j]["Items"].push(oldArr[i]);
            found=true;
            break;
    }
    if(!found){
        newArr.push({"OrderID" : oldArr[i]["OrderID"], "Items" : oldArr[i]});
    }
}

Answer 4

This should do what you want it to do, but it's rather a group function than a merge function :)

You can see the result in the browser console.

 var items = [ { "OrderID":"999123", "ItemCode":"TED-072", "ItemQuantity":"1", "ItemPrice":"74.95", }, { "OrderID":"999123", "ItemCode":"DY-FBBO", "ItemQuantity":"2", "ItemName":"DOIY Foosball Bottle Opener > Red", "ItemPrice":"34.95", } ]; function groupBy(ungrouped, groupByProperty) { var result = [], getGroup = function (arr, val, groupByProperty) { var result, j, jlen; for (j = 0, jlen = arr.length; j < jlen; j++) { if (arr[j][groupByProperty] === val) { result = arr[j]; break; } } if (!result) { result = {}; result.items = []; result[groupByProperty] = val; arr.push(result); } return result; }, i, len, item; for (i = 0, len = ungrouped.length; i < len; i++) { item = getGroup(result, ungrouped[i][groupByProperty], groupByProperty); delete ungrouped[i][groupByProperty]; item.items.push(ungrouped[i]); } return result; } var grouped = groupBy(items, 'OrderID'); document.getElementById('result').innerHTML = JSON.stringify(grouped); console.log(grouped); 

 <div id="result"></div> 

Answer 5

You need to loop and create new grouped objects according to your requirement.

For an easier approach I would suggest using jquery-linq

var qOrderIds = $.Enumerable.From(myArray).Select(function(item) { return item.OrderID; }).Distinct();
var groupedList = qOrderIds.Select(function(orderId) { 
    return { 
         OrderID: orderId, 
         Items : $.Enumerable.From(myArray).Where(function(item) { item.OrderID === orderId}).ToArray()
    };
}).ToArray();

Answer 6

Thank you for all your answers.

I was able to attain my goal (maybe a bit dirty and not as beautiful as yours but it worked on my end). Hoping this might help others in the future:

function processJsonObj2(dataObj, cfg) {
var retVal = dataObj.reduce(function(x, y, i, array) {

    if (x[cfg.colOrderId] === y[cfg.colOrderId]) {

        var orderId = x[cfg.colOrderId];
        var addressee = x[cfg.colAddressee];
        var company = x[cfg.colCompany];
        var addr1 = x[cfg.colAddress1];
        var addr2 = x[cfg.colAddress2];
        var suburb = x[cfg.colSuburb];
        var state = x[cfg.colState];
        var postcode = x[cfg.colPostcode];
        var country = x[cfg.colCountry];
        var orderMsg = x[cfg.colOrderMessage];
        var carrier = x[cfg.colCarrier];

        delete x[cfg.colOrderId];
        delete y[cfg.colOrderId];
        delete x[cfg.colAddressee];
        delete y[cfg.colAddressee];
        delete x[cfg.colCompany];
        delete y[cfg.colCompany];
        delete x[cfg.colAddress1];
        delete y[cfg.colAddress1];
        delete x[cfg.colAddress2];
        delete y[cfg.colAddress2];
        delete x[cfg.colSuburb];
        delete y[cfg.colSuburb];
        delete x[cfg.colState];
        delete y[cfg.colState];
        delete x[cfg.colPostcode];
        delete y[cfg.colPostcode];
        delete x[cfg.colCountry];
        delete y[cfg.colCountry];
        delete x[cfg.colOrderMessage];
        delete y[cfg.colOrderMessage];
        delete x[cfg.colCarrier];
        delete y[cfg.colCarrier];

        var orderObj = {};
        orderObj[cfg.colOrderId] = orderId;
        orderObj[cfg.colAddressee] = addressee;
        orderObj[cfg.colCompany] = company;
        orderObj[cfg.colAddress1] = addr1;
        orderObj[cfg.colAddress2] = addr2;
        orderObj[cfg.colSuburb] = suburb;
        orderObj[cfg.colState] = state;
        orderObj[cfg.colPostcode] = postcode;
        orderObj[cfg.colCountry] = country;
        orderObj[cfg.colOrderMessage] = orderMsg;
        orderObj[cfg.colCarrier] = carrier;
        orderObj["Items"] = [ x, y ];

        return orderObj;

    } else {
        var orderId = x[cfg.colOrderId];
        var addressee = x[cfg.colAddressee];
        var company = x[cfg.colCompany];
        var addr1 = x[cfg.colAddress1];
        var addr2 = x[cfg.colAddress2];
        var suburb = x[cfg.colSuburb];
        var state = x[cfg.colState];
        var postcode = x[cfg.colPostcode];
        var country = x[cfg.colCountry];
        var orderMsg = x[cfg.colOrderMessage];
        var carrier = x[cfg.colCarrier];

        var itemCode = x[cfg.colItemCode];
        var itemQuantity = x[cfg.colItemQuantity];
        var itemName = x[cfg.colItemName];
        var itemPrice = x[cfg.colitemPrice];

        var item = {};
        item[cfg.colItemCode] = itemCode;
        item[cfg.colItemQuantity] = itemQuantity;
        item[cfg.colItemName] = itemName;
        item[cfg.colItemPrice] = itemPrice;

        var orderObj = {};
        orderObj[cfg.colOrderId] = orderId;
        orderObj[cfg.colAddressee] = addressee;
        orderObj[cfg.colCompany] = company;
        orderObj[cfg.colAddress1] = addr1;
        orderObj[cfg.colAddress2] = addr2;
        orderObj[cfg.colSuburb] = suburb;
        orderObj[cfg.colState] = state;
        orderObj[cfg.colPostcode] = postcode;
        orderObj[cfg.colCountry] = country;
        orderObj[cfg.colOrderMessage] = orderMsg;
        orderObj[cfg.colCarrier] = carrier;
        orderObj["Items"] = [ item ];

        return orderObj;
    }

});

return retVal;

}