I've got a big JavaScript object literal I am reusing with very few modifications each time. It would be good to make a variable containing most of the object, then reference that each time I need it.

But how can I do that? I tried to do this, but it didn't work:

var settings = {
 legend: {
  enabled:false
 },
 yAxis: {
  title: {
   text: 'Impact'
  }
 },
 tooltip: {
  formatter: function() {
   return 'Impact: '+ this.y +' points'
  }
 },
 credits: {
  enabled: false
 },
 exporting: {
  enabled: false
 }
};

jQuery(document).ready(function() {   
 new Highcharts.Chart({
  chart: {
   renderTo: 'chart',
   defaultSeriesType: 'column',
   width: 450
  },         
  title: {
   text: 'Comparison of Impact for Male age 23'
  },
  xAxis: {
   categories: [
    'Good brain', 
    'Good humor', 
    'Good will'
   ],
  },
  series: [{
   data: [5,2,8]
  }],
  settings // <-- HERE
 });
}); 

I've got a big JavaScript object literal I am reusing with very few modifications each time. It would be good to make a variable containing most of the object, then reference that each time I need it.

But how can I do that? I tried to do this, but it didn't work:

var settings = {
 legend: {
  enabled:false
 },
 yAxis: {
  title: {
   text: 'Impact'
  }
 },
 tooltip: {
  formatter: function() {
   return 'Impact: '+ this.y +' points'
  }
 },
 credits: {
  enabled: false
 },
 exporting: {
  enabled: false
 }
};

jQuery(document).ready(function() {   
 new Highcharts.Chart({
  chart: {
   renderTo: 'chart',
   defaultSeriesType: 'column',
   width: 450
  },         
  title: {
   text: 'Comparison of Impact for Male age 23'
  },
  xAxis: {
   categories: [
    'Good brain', 
    'Good humor', 
    'Good will'
   ],
  },
  series: [{
   data: [5,2,8]
  }],
  settings // <-- HERE
 });
}); 

• javascript
• jquery

• Currently the object looks like obj.settings.exporting.enabled. Do you want it to be obj.exporting.enabled ? – slebetman Commented Aug 5, 2010 at 15:00

2 Answers 2

jQuerys .extend() method is what you are looking for.

For instance

$.extend(true, settings, {
   yAxis: {
     title: {
       text: 'Impact NEW'
     }
   }
});

Would just replace the yAxis part in your settings object

Reference: .extend()

jQuery.extend(settings,new) this merges objects full info, it overwrites/merges new to settings