Deep Merging Of Javascript Objects - jQuery extendext

File Size: 10.2 KB
Views Total: 332
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Deep Merging Of Javascript Objects - jQuery extendext

extendext is a jQuery plugin that extends the native jQuery .extend() utility to allow deep merging (recursive) of Javascript objects.

The difference is that it accepts an optional second string argument to specify how arrays should be merged, such as replace, concat, and extend.

How to use it:

1. Insert the jquery-extendext.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-extendext.js"></script>

2. Merge two or more JS objects together using the jquery-extendext.js.

  • deep: Determine wherther to enable recursive merge (aka. deep copy).
  • arrayMode: Array mode: replace, concat, extend or default. See below fore details.
  • target: The object to extend. It will receive the new properties.
  • object1: Object 1
  • object2: Object 2
jQuery.extendext(deep, arrayMode, target, object1, object2);

3. Replace mode.

var obj1 = {
    operators: ['AND', 'OR', 'XOR']
};
var obj2 = {
    operators: ['OR', 'XOR']
};
myObj = $.extendext(true, 'replace', {}, obj1, obj2);

// =>
{
  operators: ['OR', 'XOR']
}

4. Concat mode.

var obj1 = {
    operators: ['AND', 'OR', 'XOR']
};
var obj2 = {
    operators: ['OR', 'XOR']
};
myObj = $.extendext(true, 'replace', {}, obj1, obj2);

// =>
{
  operators: ['AND', 'OR', 'XOR', 'OR', 'XOR']
}

5. Extend mode.

var obj1 = {
    operators: ['AND', 'OR', 'XOR']
};
var obj2 = {
    operators: ['XOR', 'NAND']
};
myObj = $.extendext(true, 'replace', {}, obj1, obj2);

// =>
{
  operators: ['AND', 'OR', 'XOR', 'NAND']
}

6. Default mode. The same as the jQuery .extend() utility.

var obj1 = {
    operators: ['AND', 'OR', 'XOR']
};
var obj2 = {
    operators: ['OR', 'XOR']
};
myObj = $.extendext(true, 'replace', {}, obj1, obj2);

// =>
{
  operators: ['OR', 'XOR', 'XOR']
}

This awesome jQuery plugin is developed by mistic100. For more Advanced Usages, please check the demo page or visit the official website.