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: [] }

Answer 1

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; }

Answer 2

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)))