CODEWITHSUNDEEP
javascriptjqueryobject
Nevin
Nevin

Reputation: 3298

$.extend property not working

Recently discovered $.extend and applied it on my code:

var chartFactory = function(options) {
    this.defaults = {
        type: "line",
        width: "800",
        height: "500",
        heightScale: {
            domain: ["0", "250"],
            range: ["300", "0"]
        },
        widthScale: {
            domain: ["0", "250"],
            range: ["0", "900"]
        },
        Yaxis: {
            ticks: ["5"],
            scale: "heightScale",
            orient: "left"
        },
        Xaxis: {
            ticks: ["10"],
            scale: "widthScale",
            orient: "bottom"
        }
    };
    $.extend(this.options, options, this.defaults);
};

I have this chartFactory class where lineChart is an object of it.

EDIT: Am trying to merge the contents of the object values with the default values such that the values of the new object that has been made is retained and the resultant should be on the new object.

var lineChart = new chartFactory({
    type: "line",
    Xaxis: {
        ticks: ["20"],
        scale: "widthScale",
        orient: "bottom"
    }
});

So basically when i consoled lineChart(console.log(lineChart),this is what came up: enter image description here

The lineChart.Xaxis.ticks should have been "20".

What am i doing wrong?

Upvotes: 0

Views: 90

Answers (3)

kag
kag

Reputation: 144

   var settings = $.extend({
            readonly   : 'true', // true for static rating only and false for the clickable star.
            score      : '0',      // total score of item 
            userscore  : '0',      // ratedby user 
            count      : '',     // rating count means no of user rated   
            size       : 'medium',  // size if star large or medium currently no option for small
            click      : function(){}   /// default function for click
        }, options);

Just like this you need to pass value into {},

Upvotes: -1

76484
76484

Reputation: 8993

Return your created object:

var chartFactory = function(options) {
    /* define this.defaults */
    return $.extend({}, this.defaults, options);
};

Upvotes: 1

adeneo
adeneo

Reputation: 318182

You have to actually create this.options first, then merge the other two objects into that object, passing this.defaults first, then options, as the latter will overwrite properties in the former

var chartFactory = function(options) {
    this.defaults = {
        type: "line",
        width: "800",
        height: "500",
        heightScale: {
            domain: ["0", "250"],
            range: ["300", "0"]
        },
        widthScale: {
            domain: ["0", "250"],
            range: ["0", "900"]
        },
        Yaxis: {
            ticks: ["5"],
            scale: "heightScale",
            orient: "left"
        },
        Xaxis: {
            ticks: ["10"],
            scale: "widthScale",
            orient: "bottom"
        }
    };
    this.options = {};
    $.extend(this.options, this.defaults, options);
};

var lineChart = new chartFactory({
    type: "line",
    Xaxis: {
        ticks: ["20"],
        scale: "widthScale",
        orient: "bottom"
    }
});

FIDDLE

Upvotes: 2

Related Questions