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.

Answer 1

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/

Answer 2

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/