Overwrite options when writing a simple jquery plugin

Question

I am trying to write a simple jquery plugin with some php code to display tables from a database. The plugin allows the user to search, browse and sort pages. I know that there are wonderful plugins for this, but I'm new (6 months with any programming) and I'm trying to find out something.

Almost everything has been done, but I stopped when trying to make "multi-level" options.

The easiest option for the user looks like this (almost all of them look like this):

$('#main').ableTable({
    mode :'sqlite'
})  

Then it overrides the default settings:

var settings = $.extend({
    mode : 'mysql' 
} ,options);

It's simple.

But if I have a more complex option, for example:

var settings = $.extend({
    translate :{
        navigation :{
            prev :'previous' ,
            next :'next'
        } ,
        search :'search' ,
        no_result :'nothing was found' ,
        from :'from' ,
        total :'total'
    }
    // other options
} ,options);

Then, if the user only declares:

$('#main').ableTable({
    translate :{
        navigation :{
            prev :'poprzedni'
        }
    }
})  

It overwrites everything in settings.translate

, settings.navigation.prev( ) ?

Answer 1

deep extend() - , , , ...

var settings = {
    translate :{
        navigation :{
            prev :'previous' ,
            next :'next'
        } ,
        search :'search' ,
        no_result :'nothing was found' ,
        from :'from' ,
        total :'total'
    }
}

var options = {
    translate: {
        navigation: {
            prev: "something else"
        }
    }
};

$.extend(true, settings, options);

extend(), ...

https://api.jquery.com/jquery.extend/

Answer 2

, , deep Boolean , jQuery.extend(), (, ) :

var defaults = {
    'fruits': {
      'bananas': 1,
      'plums': 2
    },
    'drinks': {
      'coffee': 1,
      'milk': 2
    }
  },
  userOptions = {
    'fruits': {
      'cherries': 30,
      'strawberries': 10,
      'plums': 0
    },
    'drinks': {
      'coffee': 2,
      'cola': 1
    }
  },
  results = $.extend(true, defaults, userOptions);

$('body').text(JSON.stringify(results));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hide result

JS Fiddle demo, .

jQuery.extend() ( defaults), , ( userOptions).

:

• jQuery.extend().

Answer 3

This is easy to do without jQuery, especially for you to find out more, just use a recursive search:

var params = {
  translation: {
    level1: {
      level2: {
        setting: 'my luxury setting'
      }
    }
  }
};

var defaults = {
  translation: {
    level1: {
      level2: {
        setting: 'my poor setting'
      }
    },
    level0: 'I don\'t know what I am doing here'
  }
};

// this function is called against every property in params
function recursive(thisparams,thisdefault) {
  for (var prop in thisparams) {
    if (thisparams.hasOwnProperty(prop)) {
      // if both params and defaults have this property as an object, search deeper
      if (thisparams[prop] instanceof Object && defaults[prop] instanceof Object) {
        recursive(thisparams[prop], thisdefault[prop])
      // one of properties is not an object, just override the default thing
      } else { 
        thisdefault[prop] = thisparams[prop];
      }
    }
  }
}

recursive(params, defaults);

console.log(defaults);

Fiddle