I have to merge two objects but I don't want to assign undefined value to defined values.

A = { activity: 'purchased', count: undefined, time: '09:05:33' }
B = { activity: 'purchased', count: '51', time: undefined }

When I try Object.assign, undefined is replacing fields that have values.

What I want

C = { activity: 'purchased', count: '51', time: '09:05:33' }

I have to merge two objects but I don't want to assign undefined value to defined values.

A = { activity: 'purchased', count: undefined, time: '09:05:33' }
B = { activity: 'purchased', count: '51', time: undefined }

When I try Object.assign, undefined is replacing fields that have values.

What I want

C = { activity: 'purchased', count: '51', time: '09:05:33' }

• javascript
• reactjs

• 1 first remove the undefined Object.keys(A).filter(key => A[key]).reduce((acc, key) => (acc[key] = A[key], acc), {}) ones and assign. – Kharel Commented Jul 10, 2020 at 16:02
• Will A and B have same property name (i.e no extra property in any of them) and can A and B have different values of same property? If yes, them which one to assign. – kapil pandey Commented Jul 10, 2020 at 16:08
• I cleaned up the tags but kept the reactjs tag as I guess it's because you're looking for an immutable solution? – Emile Bergeron Commented Jul 10, 2020 at 17:59

7 Answers 7

You could use lodash's merge command. C = _.merge(A,B);

The spread operator(...) works well to merge objects, and there is a simple solution to remove undefined using JSON.stringify() and JSON.parse(). See below example:

const A = { activity: 'purchased', count: undefined, time: '09:05:33' };
const B = { activity: 'purchased', count: '51', time: undefined };

//If you don't care about date objects then only use below method 
const C = {...JSON.parse(JSON.stringify(A)), ...JSON.parse(JSON.stringify(B))};

console.log(C);

let A = { activity: 'purchased', count: undefined, time: '09:05:33' }
let B = { activity: 'purchased', count: '51', time: undefined }

let C={}
Object.keys({...A,...B}).map(key=>{
C[key]=B[key]||A[key]
})
console.log(C)

You could merge the objects by having a look to the entries of the second object and take only key/value pairs without undefined as value.

const
    merge = (a, b) => Object.assign(
        {},
        a,
        ...Object.entries(b).map(([k, v]) => v === undefined ? {} : { [k]: v })
    ),
    a = { activity: 'purchased', count: undefined, time: '09:05:33' },
    b = { activity: 'purchased', count: '51', time: undefined };

console.log(merge(a, b));

I just had to do the same, and came up with:

function assignIgnoreUndefined(...args) {
  const final = args.shift();
  args.filter(arg => !!arg).forEach(arg => {
    Object.entries(arg).forEach(nv => {
      const [ name, value ] = nv;
      if (value !== undefined) {
        final[name] = value;
      }
    });
  });
  return final;
}

Example usage:

const A = { activity: 'purchased', count: undefined, time: '09:05:33' };
const B = { activity: 'purchased', count: '51', time: undefined };
const C = assignIgnoreUndefined({}, A, B);
console.log(C);

Output:

{ activity: 'purchased', time: '09:05:33', count: '51' }

const A = { activity: 'purchased', count: undefined, time: '09:05:33' }
const B = { activity: 'purchased', count: '51', time: undefined }
const AKeys = Object.keys(A);
const BKeys = Object.keys(B);
const C = {};
AKeys.forEach(element=>A[element] && C[element]=A[element])
BKeys.forEach(element=>B[element] && C[element]=B[element])

let A = { activity: 'purchased', count: undefined, time: '09:05:33' }
let B = { activity: 'purchased', count: '51', time: undefined }

for (let a in A) {
  if (A[a] === undefined) 
    delete A[a];
}

for (let b in B) {
  if (B[b] === undefined) 
    delete B[b];
}

let c = {...A, ...B} // this will merge identical key/values

console.log(c)