Extend javascript object without jquery

Question

I have 2 objects, for example: 1st:

const langs = {
  en: {
    components: {
      test: 'test'
    },
  },
  de: {
    components: {
      test: 'test'
    },
  },
};

2nd:

const langs2 = {
  en: {
    app: {
      test: 'test'
    },
  },
  pl: {
    app: {
      test: 'test'
    },
  },
};

And now i need to merge these 2 object into one, it should looks like:

{
  en: {
    components: {
      test: 'test'
    },
    app: {
      test: 'test'
    },
  },
  de: {
    components: {
      test: 'test'
    },
  },
  pl: {
    app: {
      test: 'test'
    },
  },
};

There is any solution to do that? I tried Object.assign but when I have 2 same named properties it just override them. So, when I have same lang in 2 object it should extend it, when I have different lang it should just add that to object. I cant use jquery or other lib, so it must be pure js (es6 avaible)

Answer 1

You can use a small library called deepmerge:

 (function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.deepmerge = factory());}(this, (function () { 'use strict';var isMergeableObject = function isMergeableObject(value) {return isNonNullObject(value) && !isSpecial(value)};function isNonNullObject(value) {return !!value && typeof value === 'object'}function isSpecial(value) {var stringValue = Object.prototype.toString.call(value);return stringValue === '[object RegExp]' || stringValue === '[object Date]' || isReactElement(value)}/* see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25*/var canUseSymbol = typeof Symbol === 'function' && Symbol.for;var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;function isReactElement(value) {return value.$$typeof === REACT_ELEMENT_TYPE}function emptyTarget(val) {return Array.isArray(val) ? [] : {}}function cloneUnlessOtherwiseSpecified(value, options) {return (options.clone !== false && options.isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, options) : value}function defaultArrayMerge(target, source, options) {return target.concat(source).map(function(element) {return cloneUnlessOtherwiseSpecified(element, options)})}function mergeObject(target, source, options) {var destination = {};if (options.isMergeableObject(target)) {Object.keys(target).forEach(function(key) {destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);});}Object.keys(source).forEach(function(key) {if (!options.isMergeableObject(source[key]) || !target[key]) {destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);} else {destination[key] = deepmerge(target[key], source[key], options);}});return destination}function deepmerge(target, source, options) {options = options || {};options.arrayMerge = options.arrayMerge || defaultArrayMerge;options.isMergeableObject = options.isMergeableObject || isMergeableObject;var sourceIsArray = Array.isArray(source);var targetIsArray = Array.isArray(target);var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;if (!sourceAndTargetTypesMatch) {return cloneUnlessOtherwiseSpecified(source, options)} else if (sourceIsArray) {return options.arrayMerge(target, source, options)} else {return mergeObject(target, source, options)}}deepmerge.all = function deepmergeAll(array, options) {if (!Array.isArray(array)) {throw new Error('first argument should be an array')}return array.reduce(function(prev, next) {return deepmerge(prev, next, options)}, {})};var deepmerge_1 = deepmerge;return deepmerge_1; }))); const langs = { en: { components: { test: 'test' }, }, de: { components: { test: 'test' }, }, }; const langs2 = { en: { app: { test: 'test' }, }, pl: { app: { test: 'test' }, }, }; let result = deepmerge(langs, langs2); console.log(result); 

https://github.com/KyleAMathews/deepmerge