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](https://stackoverflow.com/questions/18498801/how-to-merge-two-json-objects-values-by-keys), but I am not using jQuery and would prefer either lodash, d3.js or vanilla js solution. 

Thank You.