CODEWITHSUNDEEP
jquery
Dariusz Majchrzak
Dariusz Majchrzak

Reputation: 1237

Overwriting settings when I write simple jquery plugin

I try to write simple jquery plugin with some php code for displaying tables from database. Plugin allows user to search, go through the pages and sort. I know there's some great plugins for that, but I'm a newbie (6 months with any kind of programming) and I try to learn something.

Practically everything is done but I stopped at trying to do "multilevel" options.

The simplest option for user looks like that (almost all of them looks like that):

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

Then it overrides the default settings:

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

That's simple.

But If I have some more complicated option like:

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 user declare only:

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

It overwrites everything in settings.translate

How to correclty handle user defined options, if I wanna overwrite only the settings.navigation.prev (in this example) and leave the rest of default setttings?

Upvotes: 4

Views: 62

Answers (3)

David Thomas
David Thomas

Reputation: 253307

This would seem to be answered by the use of the deep Boolean option available to jQuery.extend(), for (a simple, contrived) example:

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>

External JS Fiddle demo, for experimentation and development.

The Boolean switch causes the jQuery.extend() method to perform a recursive modification of the target object (here defaults) using both top-level, and nested, objects of the supplied object(s) (here userOptions).

References:

Upvotes: 3

smnbbrv
smnbbrv

Reputation: 24541

This is easy to do without any jQuery, especially for you to learn 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

Upvotes: 3

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

You need to use the deep parameter in the overloaded extend() function - it's basically another version of the same function, but it makes it recursive so it looks within the object, rather than just the top level...

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

Have a look at the documentation for extend() to find out more...

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

Upvotes: 4

Related Questions