How to merge nested objects in javascript

Question

Merging nested objects it overides.

let target = { cache: 
              {curUser:
               { callingName: 'ch sairam', dateOfBirth: undefined, isTempDob: true, knowMarketPrefChange: true, email: '[email protected]', gender: '',  livingIn: 'IN', uid: 'CrzpFL2uboaeGvMxXi5WQKSQsCr1', timeZone: undefined }, 
               names: [ [Object] ],   minPrice: '2500', maxPrice: '50000', market: 'CA', foundLovedOne: false,  }
             }

let source = { cache: 
              {curUser: 
               { isTempDob: true, knowMarketPrefChange: false, timeZone: 'Asia/Kolkata' },
               prefLanguage: 'en', market: 'IN',  minPrice: 2250, maxPrice: 45000, foundLovedOne: false, domainName: 'roo-fire.appspot.com', prodQueryPageNumber: 0, welcomeIntentShown: true }, 
              curContexts: [] }

 target = Object.assign({},target,source);

when print target it results

Object { cache: Object { curUser: Object { isTempDob: true, knowMarketPrefChange: false, timeZone: "Asia/Kolkata" }, prefLanguage: "en", market: "IN",   minPrice: 2250, maxPrice: 45000, foundLovedOne: false,  prodQueryPageNumber: 0, welcomeIntentShown: true }, curContexts: Array [] }

source override target, I want to get this results?

{ cache: 
              {curUser:
               { callingName: 'ch sairam', dateOfBirth: undefined, isTempDob: true, knowMarketPrefChange: false, email: '[email protected]', gender: '', prefMarket: 'CA', livingIn: 'IN', uid: 'CrzpFL2uboaeGvMxXi5WQKSQsCr1', timeZone:'Asia/Kolkata' }, 
               prefLanguage: 'en',names: [ [Object] ], minPrice: '2250', maxPrice: '45000', market: 'CA', foundLovedOne: false, prodQueryPageNumber: 0, welcomeIntentShown: true },
              curContexts: [] }

Does this answer your question? How to deep merge instead of shallow merge? — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Mar 8, 2023 at 17:03

Nina Scholz · Accepted Answer · 2019-05-22 12:42:25Z

11

You could merge all propeties and use a recursive aproach for nested objects.

function merge(a, b) {
    return Object.entries(b).reduce((o, [k, v]) => {
        o[k] = v && typeof v === 'object'
            ? merge(o[k] = o[k] || (Array.isArray(v) ? [] : {}), v)
            : v;
        return o;
    }, a);
}

var target = { cache: { curUser: { callingName: 'ch sairam', dateOfBirth: undefined, isTempDob: true, knowMarketPrefChange: true, email: '[email protected]', gender: '', livingIn: 'IN', uid: 'CrzpFL2uboaeGvMxXi5WQKSQsCr1', timeZone: undefined }, names: [['Object']], minPrice: '2500', maxPrice: '50000', market: 'CA', foundLovedOne: false } },
    source = { cache: { curUser: { isTempDob: true, knowMarketPrefChange: false, timeZone: 'Asia/Kolkata' }, prefLanguage: 'en', market: 'IN', minPrice: 2250, maxPrice: 45000, foundLovedOne: false, domainName: 'roo-fire.appspot.com', prodQueryPageNumber: 0, welcomeIntentShown: true }, curContexts: [] };

console.log([{}, target, source].reduce(merge));

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited May 22, 2019 at 12:42

answered May 22, 2019 at 12:34

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

12 Comments

Nina Scholz Over a year ago

v && typeof v === 'object' separates between having null or an object which is not null. null is in javascript an object but not truthy.

jason Over a year ago

Why do we assign o[k] with null if v is null? What if o[k] in a , say having a value, then value would be replaced by a null? In other questions, why this recursive would work as in finally merging the results as expected? ? merge(o[k] = o[k] || (Array.isArray(v) ? [] : {}), v)

Nina Scholz Over a year ago

here it is: every recursion need to hande en end situation where no other call of the funtion takes place. this is here wrapped in a check for having an object (not null) and returning eiter the merged objects or just a value. the return of the value stops the recursion.

Nina Scholz Over a year ago

@jason, at some end, no object is available, then it returns the single primitive value. maybe it comes more clear, if you replace the ternary with an if statement and return the first ? part and later return the second : part. another if or else is not necessary, because having a return stament before, the rest of the function is always the else part.

Nina Scholz Over a year ago

@jason, your result is right/expected. i don't kow how loash is implemented. you are welcome.

|

SoWhat · Accepted Answer · 2019-05-22 12:28:52Z

4

Object.assign doesn't do a deep merge. To do a nested merge, I suggest using lodash

import _ = require('lodash');
target = _.merge(source, value2);

Alternately, you can copy both the objects and do an object.assign merge

target =Object.assign({},JSON.parse(JSON.stringify(source)), JSON.parse(JSON.stringify(target)))

answered May 22, 2019 at 12:28

SoWhat

5,6222 gold badges30 silver badges63 bronze badges

Comments

Kamran Taghaddos · Accepted Answer · 2022-05-01 21:05:09Z

1

You can use this advanced function for object/array deep merge (or deep assign). It's working like a charm.

export function deepAssignJSON(target, source, {isMutatingOk = false, isStrictlySafe = false} = {}) {

    // Returns a deep merge of source into target. Does not mutate target unless isMutatingOk = true.
    target = isMutatingOk ? target : clone(target, isStrictlySafe);
    for (const [key, val] of Object.entries(source)) {
        if (val !== null && typeof val === `object`) {
            if (target[key] === undefined) {
                target[key] = {};
            }

            // Even where isMutatingOk = false,
            // recursive calls only work on clones, so they can always safely mutate --- saves unnecessary cloning
            target[key] = deepAssignJSON(target[key], val, {isMutatingOk: true, isStrictlySafe});
        } else {
            target[key] = val;
        }
    }
    return target;
}

function clone(obj, isStrictlySafe = false) {

    // Clones an object. First attempt is safe. If it errors (e.g. from a circular reference),
    // 'isStrictlySafe' determines if error is thrown or an unsafe clone is returned. 
    try {
        return JSON.parse(JSON.stringify(obj));
    } catch(err) {
        if (isStrictlySafe) { throw new Error() }
        console.warn(`Unsafe clone of object`, obj);
        return {...obj};
    }
}

answered May 1, 2022 at 21:05

Kamran Taghaddos

6221 gold badge10 silver badges28 bronze badges

2 Comments

Sudip Barman Over a year ago

This simple solution works great

jason Over a year ago

I don’t understand this part: if (target[key] === undefined) { ; if it is undefined. Then shouldn’t the next step is assign value into target[key]? But right now, we only do target[key] = val when val is null, which i found it confusing. In fact shouldn’t we assign nothing when val is null?

Ido Bleicher · Accepted Answer · 2020-12-23 11:30:19Z

0

You could also use Ramda. it's an open source javascript util. which has much less deps that loadash.

And with Ramda, using the mergeDeepRight :

import { mergeDeepRight } from 'ramda';

result = mergeDeepRight(sourceObject, targetObject)

Object assign doesn't take nested values. which is the issue that you having at this moment.

answered Dec 23, 2020 at 11:30

Ido Bleicher

8471 gold badge12 silver badges19 bronze badges

1 Comment

Ido Bleicher Over a year ago

Reference for mergeDeepRight: github.com/ramda/ramda/blob/v0.27.0/source/mergeDeepRight.js

Collectives™ on Stack Overflow

How to merge nested objects in javascript

4 Answers 4

12 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related