CODEWITHSUNDEEP
javascriptreactjsimmutable.js
user3362908
user3362908

Reputation: 443

ReactJS : Immutable.js : merge two Json objects

I'm using React, Redux & immutable. I tried to merge two Json objects, data and expected result is given below,

obj1 = 
{id: 1, first_name: "abc", surname: "def", children: ["kid1", "kid2"]}

obj2 = 
{first_name: "abc", surname: "def", email: "[email protected]", mobile: ""}

mergedObj = {id: 1, first_name: "abc", surname: "def", email: "[email protected]", Mobile: "",  children: ["kid1", "kid2"]}

If data is not available on obj1, it should be taken it from obj2.

I tried using immutable merge as outlined below,

import Immutable, {merge} from "immutable";
const mergedObj = merge(Immutable.fromJS(obj2), Immutable.fromJS(obj1));
console.log(mergedObj)

Result is same as obj2, essentially, merge is not happening,

{first_name: "abc", surname: "def", email: "[email protected]", mobile: ""}

Upvotes: 4

Views: 6393

Answers (4)

Yunus ER
Yunus ER

Reputation: 2189

exampleData=

        const json1 = [
            {id: 1, test: 1},
            {id: 2, test: 2},
            {id: 3, test: 3},
            {id: 4, test: 4},
            {id: 5, test: 5}
        ];

        const json2 = [
            {id: 3, test: 6},
            {id: 4, test: 7},
            {id: 5, test: 8},
            {id: 6, test: 9},
            {id: 7, test: 10}
        ];

example1=


        const finalData1 = json1.concat(json2).reduce(function (index, obj) {
            index[obj.id] = Object.assign({}, obj, index[obj.id]);
            return index;
        }, []).filter(function (res, obj) {
            return obj;
        });

example2=

        let hashData = new Map();

        json1.concat(json2).forEach(function (obj) {
            hashData.set(obj.id, Object.assign(hashData.get(obj.id) || {}, obj))
        });

        const finalData2 = Array.from(hashData.values());

I recommend second example , it is faster.

Upvotes: 1

cypherfunc
cypherfunc

Reputation: 2659

If you start with POJOs and want to end with a POJO, I recommend using object spread syntax (or Object.assign) as mentioned above. There's no need to use Immutable in that case.

If you want to use Immutable, and you know that obj1 and obj2 are objects, you can call Map(obj2).merge(obj1) instead, which definitely works. (Based on widespread usage in our codebase.)

Otherwise, the docs claim that you can call Immutable.merge with POJOs, so you might have better luck with Immutable.merge(obj2, obj1), leaving out the calls to Immutable.fromJS.

Upvotes: 0

hugo
hugo

Reputation: 3231

The docs seem to indicate you are using immutable.merge() correctly.

Sadly, this feature seems broken, as one can see on their live example.

I would advise to submit an issue/pull-request to get this fixed, but it seems like immutable is now essentially unmaintained -- the repo sits with 26 open pull requests, and none was merged in the last month.

Anyway, I would say that can do just fine with ES6+ JS. Immutable was kind of a must-have before that, because JS did not offer adequate tools out-of-the-box for that paradigm.

If that's an option (or even if it's not, the following will work as intended), consider @AlwinJose's suggestion of using the spread syntax for object literals, available since ES2018:

var mergedObj = {...obj1,...obj2};

(performs a shallow merge, just like Object.assign)

Upvotes: 3

Alwin Jose
Alwin Jose

Reputation: 773

You can do merge using javascript spread operator which is introduced in ES6 onwards.

var obj1 = {id: 1, first_name: "abc", surname: "def", children: ["kid1", "kid2"]}

var obj2 = {first_name: "abc", surname: "def", email: "[email protected]", mobile: ""}

var mergedObj = {...obj1,...obj2};

Upvotes: 5

Related Questions