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
– Ted Hopp, Commented Apr 20, 2014 at 18:41
Ok, I have moved those around, thank you. i was left over from previous failed attempt. — DeBraid
– DeBraid, Commented Apr 20, 2014 at 18:46
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
– Ted Hopp, Commented Apr 20, 2014 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
– DeBraid, Commented Apr 20, 2014 at 20:17

jlengstorf · Accepted Answer · 2017-03-27 19:21:09Z

5

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/

answered Mar 27, 2017 at 19:21

jlengstorf

4471 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DeBraid · Accepted Answer · 2014-04-20 20:33:22Z

4

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/

answered Apr 20, 2014 at 20:33

DeBraid

9,4595 gold badges34 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related