CODEWITHSUNDEEP
javascriptjqueryoop
yoda
yoda

Reputation: 10981

Javascript - Define object property name by reference

I'm trying to set some properties inside an object. I'd love not having to tell the object what to expect from the outside (making the object more flexible, imo), so I tried this, without success :

slideshow = {
    init : function(data) {
        if (!data)
            return false;

        $.each(data,
            function(index, value) {
                // this isn't working, and don't know how to
                this[index] = value;
            }
        );

        alert(this.options.interval);

        return true;
    },
};

Think it's pretty clear what's missing.

Any ideas? Cheers!

update

    var data = {
        options : [
            {
                interval : 8000,
                target : '#slider img',
            },
        ],
        images : [
            {
                img : 'assets/img/assets/img/slider_test_img.png',
                title : 'Uniforme de Restauração 1',
                description : 'blablabla descricao',
                url : 'http://www.google.pt',
            },
            {
                img : 'assets/img/assets/img/slider_test_img.png',
                title : 'Uniforme de Restauração 2',
                description : 'blablabla descricao 2',
                url : 'http://www.google.pt',
            },
            {
                img : 'assets/img/assets/img/slider_test_img.png',
                title : 'Uniforme de Restauração 3',
                description : 'blablabla descricao 3',
                url : 'http://www.google.pt',
            },
        ],
    }

Upvotes: 0

Views: 390

Answers (3)

Russ Cam
Russ Cam

Reputation: 125528

The problem is that inside the function that you pass to each, this no longer refers to slideshow but to the value of the current iteration. you need to store a reference to slideshow before going into the each loop:

slideshow = {
    init : function(data) {
        if (!data)
            return false;

        var that = this;

        $.each(data,
            function(index, value) {
                that[index] = value;
            }
        );
    },
};

Upvotes: 1

user113716
user113716

Reputation: 322542

Either make a direct reference to the object:

$.each(data,
    function(index, value) {
     //     v------direct reference
        slideshow[index] = value;
    }
);

or don't use $.each(), and just use a for-in loop for an object, or a for for an array, since that won't change the this value:

  // I don't know if data is an Array or an object
for( var n in data ) {
    this[ n ] = data[ n ];
}

Or you could use the jQuery.proxy()[docs] method to establish the this value in the $.each() handler.

$.each(data,
    $.proxy( function(index, value) {
        this[index] = value;
    }, this )
);

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816790

You have to keep a reference to this:

var self = this;
$.each(data, function(index, value) {
    self[index] = value;
});

or using jQuery's jQuery.proxy method:

$.each(data, $.proxy(function(index, value) {
    this[index] = value;
}, this));

Otherwise, this will refer to value, as described in the documentation.

Upvotes: 6

Related Questions