Merge two javascript objects if key is equal with either lodash, vanilla js, or d3

Question

I have 3 similar javascript objects.

var gdp = {
    "city": city,
    "gdp": [],  
};

var income = {
    "city": city,
    "income": [],  
};

var uRate = {
    "city": city,
    "uRate": [],  
};

Where I have many cities (n=28), and [] is my data array of integers with uniform length for each: gdp, income, uRate.

GOAL: Combine these into a single object for each city:

var finalData = {
    "city": city, 
    "gdp": [],
    "income": [],
    "uRate": [] 
}

I've tried variations of the following.

if ( ObjA.city == ObjB.city ) { Obj.city.metric = this.metric] };

Or, if city matches, add the metric (either gdp, income or uRate) to the finalData object.

cities.forEach(function ( city ) {

    var metrics = ['gdp', 'income', 'uRate'];

    metrics.forEach(function ( metric ) {

        if ( metric.city == city ) {  // edit: removed i

            var finalData = {
                "city": city, 
                "gdp": [],
                "income": [],
                "uRate": [] 
            };

        }    

    })

       return finalData;  // edit: moved this per suggestion

};

Here is a similar example using $.extend() with jQuery: How to merge two object values by keys, but I am not using jQuery and would prefer either lodash, d3.js or vanilla js solution.

Thank You.

You need to move your `return` to after the loop. Also, what's `i`? — Ted Hopp, Apr 20 '14 at 18:41
Ok, I have moved those around, thank you. i was left over from previous failed attempt. — DeBraid, Apr 20 '14 at 18:46
@DeBraid Have you looked at [_.extend](http://underscorejs.org/#extend)? — Kyle Needham, Apr 20 '14 at 18:55
I don't quite understand what you're doing. Since `gdp`, etc. have a single `city` property, how do you expect to come up with an array of objects? At most one `city` value will match `gdp.city`, etc. — Ted Hopp, Apr 20 '14 at 20:03
Thanks Ted, I tried to grossly over-simplify what I am doing and it doesn't translate well! I have found that _.merge takes 3 objects and will perform the desired operation! — DeBraid, Apr 20 '14 at 20:17

score 5 · Answer 1 · answered Mar 27 '17 at 19:21

To anyone landing here from Google, it's now pretty easy to do this with vanilla JS using Object.assign().

This is a zero-dependency equivalent to the result in the accepted answer:

Object.assign({}, gdp, income, uRate);

Note that this won't work in IE, but will work in Edge. The polyfill isn't too heavy, though.

Working solution at https://jsfiddle.net/bLhk6x6a/1/

score 4 · Accepted Answer · answered Apr 20 '14 at 20:33

Using lodash _.merge will satisfy the original question:

Given 3 objects:

var gdp = {
    "city": city,
    "gdp": [],  
};

var income = {
    "city": city,
    "income": [],  
};

var uRate = {
    "city": city,
    "uRate": [],  
};

Then bring in lodash and do:

var finalData = _.merge(gdp, income, uRate);

and the result is as desired:

{
    "city": city, 
    "gdp": [],
    "income": [],
    "uRate": [] 
}

Working solution here: http://jsfiddle.net/e99KQ/3/

Merge two javascript objects if key is equal with either lodash, vanilla js, or d3

2 Answers2

Linked