Combining JSON Arrays with jQuery

Question

I've spent all morning messing with this now and reading on here, but have found myself going round in circles!

I am trying to draw a chart using the excellent AmCharts Javascript Charts, to show me stock holding as a bar chart and stock turn as a line chart.

I cannot get both sets of data from one query to my database, and cannot use AmCharts StockChart as it is not time based data... therefore, I have two sets of data which need combining with Javascript.

The data is being pulled from a database and returned successfully as JSON arrays similar to this:

SALES DATA:

[{"brandName":"Fender","gearShiftedPerMonth":"35","retailSalesPerMonth":"55"},
 {"brandName":"Gibson","gearShiftedPerMonth":"23","retailSalesPerMonth":"43"},
 {"brandName":"Epiphone","gearShiftedPerMonth":"10","retailSalesPerMonth":"13"}]

STOCK DATA:

[{"brandName":"Gibson","stockValue":"1234"},
 {"brandName":"Fender","stockValue":"975"},
 {"brandName":"Epiphone","stockValue":"834"}]

Obviously the actual figures are made up in that example!

Now, what I need to do is to combine those to create this:

COMBINED DATA

[{"brandName":"Fender","gearShiftedPerMonth":"35","retailSalesPerMonth":"55","stockValue":"975"},
 {"brandName":"Gibson","gearShiftedPerMonth":"23","retailSalesPerMonth":"43","stockValue":"1234"},
 {"brandName":"Epiphone","gearShiftedPerMonth":"10","retailSalesPerMonth":"13","stockValue":"834"}]

What we have there is the Sales Dataset combined with Stock Dataset to add the additional data of stockValue added to the corresponding brandName record.

I have tried using $.extend but I can't figure out how to use it in this situation.

It is perhaps important to note that the data pairs might not necessarily be in the right order, and it is possible, though unlikely, that there might not be a match, so some kind of zeroing error catching must be implemented.

Answer 1

What you'll need to do first is transform the data into two objects, whose properties are the values you want to merge together:

{
"Fender" : {"gearShiftedPerMonth":"35","retailSalesPerMonth":"55"},
"Gibson" : {"gearShiftedPerMonth":"23","retailSalesPerMonth":"43"},
"Epiphone" : {"gearShiftedPerMonth":"10","retailSalesPerMonth":"13"}
}

and

{
"Gibson": {"stockValue":"1234"},
"Fender": { "stockValue":"975"},
"Epiphone": { "stockValue":"834"}
}

Once the transformation is done, you'll have two objects that you can merge using $.extend or other functions.

Update

For large sets, this gives results in nearly linear time:

var salesa = {}, stocka = {};
$.each(sales, function(i, e) {
    salesa[e.brandName] = e;
});
$.each(stock, function(i, e) {
    stocka[e.brandName] = e;
});

var combine = {};
$.extend(true, combine, salesa, stocka)

More speed can be tweaked if the merging happened during the second transformation callback ($each(stock...) instead of a separate call to $.extend() but it loses some of its obviousness.

Answer 2

I think what's he's trying to do is join the two datasets as if they were tables, joining by the brandName. From what I've been testing jQuery's $.extend() function does not take care of that, but merges objects according to their index in the Object arrays that it receives.

I think the matching of the key would need to be done manually.

stock = [{"brandName":"Fender","gearShiftedPerMonth":"35","retailSalesPerMonth":"55"},
 {"brandName":"Gibson","gearShiftedPerMonth":"23","retailSalesPerMonth":"43"},
 {"brandName":"Epiphone","gearShiftedPerMonth":"10","retailSalesPerMonth":"13"}];
value = [{"brandName":"Gibson","stockValue":"1234"},
 {"brandName":"Fender","stockValue":"975"},
 {"brandName":"Epiphone","stockValue":"834"}];

var results = [];
$(stock).each(function(){
    datum1 = this;
    $(value).each(function() {
        datum2 = this;
        if(datum1.brandName == datum2.brandName)
            results.push($.extend({}, datum1, datum2));
    });
});

Which would result in:

[{"brandName":"Fender","gearShiftedPerMonth":"35","retailSalesPerMonth":"55","stockValue":"975"},
{"brandName":"Gibson","gearShiftedPerMonth":"23","retailSalesPerMonth":"43","stockValue":"1234"},
{"brandName":"Epiphone","gearShiftedPerMonth":"10","retailSalesPerMonth":"13","stockValue":"834"}]

Instead of what the use of $.extend() returns:

[{"brandName":"Gibson","gearShiftedPerMonth":"35","retailSalesPerMonth":"55","stockValue":"1234"},
{"brandName":"Fender","gearShiftedPerMonth":"23","retailSalesPerMonth":"43","stockValue":"975"},
{"brandName":"Epiphone","gearShiftedPerMonth":"10","retailSalesPerMonth":"13","stockValue":"834"}]