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.