Undefined variable in $.each() jquery

Question

I'm using this class in javascript:

function rMotoristaList() {
}

rMotoristaList.prototype.permInsert = false;
rMotoristaList.prototype.permSelect = false;
rMotoristaList.prototype.permUpdate = false;
rMotoristaList.prototype.permDelete = false;

rMotoristaList.prototype.init = function() {
    // Pega as permissoes
    var perm = new cPermissao();
    this.permInsert = perm.verificaPermissao(ID_CAD_MOTORISTAS, "insert");
    this.permUpdate = perm.verificaPermissao(ID_CAD_MOTORISTAS, "update");
    this.permDelete = perm.verificaPermissao(ID_CAD_MOTORISTAS, "delete");

    if (this.permInsert == false) {
        $("#btn-add-novo").hide();
    }
};

rMotoristaList.prototype.renderGrid = function(data) {
    var html = "";

    // Faz o loop em todos os elementos retornados
    $.each(data,function(index, motorista) {
        if (this.permUpdate != false) {
            //Do something
        }
    }
};

The attrbitue permUpdate is false, but, when i compare him, inside of $.each(), don't work, i receive a undefined.

How can i get the value of this.permUpdate inside $.each()?

Inside the each callback, `this` refers to the current item in the loop not the class. Halfway through writing and saw that @lgupta had posted the answer! See that — Adam, Apr 16 '14 at 20:12
Would it make more sense to have that if statment outside of the each? does the result of the conditional change on each iteration? — Kevin B, Apr 16 '14 at 20:13
I recommend you reading something about closures in javascript and how the context for the function works... http://stackoverflow.com/questions/111102/how-do-javascript-closures-work/111200#111200 — FredyC, Apr 16 '14 at 20:13
@KevinB - +1, It sure would, what's the point of iterating if `this.permUpdate` is false and nothing happens anyway ? — adeneo, Apr 16 '14 at 20:15

score 2 · Accepted Answer · 2014-04-16T20:46:41.903

2

Inside an anonymous function this will not refer rMotoristaList. You can cache this and use it.

rMotoristaList.prototype.renderGrid = function(data) {
    var html = "",
        self = this;

    // Faz o loop em todos os elementos retornados
    $.each(data,function(index, motorista) {
        if (self.permUpdate != false) {
            //Do something
        }
};

edited Apr 16 '14 at 20:46

answered Apr 16 '14 at 20:10

You could have at least explain what have changed and why...like @sweetamylase. – FredyC Apr 16 '14 at 20:15

score 1 · Answer 2 · answered Apr 16 '14 at 20:14

The this inside $.each() refers to the function context of the .each() and not the one in your code. What you can do is save your context outside of the .each() block, in JavaScript it's called a Closure, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures.

rMotoristaList.prototype.renderGrid = function(data) {
    var html = "";
    var that = this;
    // Faz o loop em todos os elementos retornados
    $.each(data,function(index, motorista) {
        if (that.permUpdate != false) {
        //Do something
        }
    }

} ;

score 1 · Answer 3 · edited Apr 16 '14 at 20:21

There is also another approach, which might be somewhat better in situation like this...

rMotoristaList.prototype.renderGrid = function(data) {
    var html = "";

    // Faz o loop em todos os elementos retornados
    $.each(data,function(index, motorista) {
        if (this.permUpdate != false) {
            //Do something
        }
    }.bind(this)); // <-- Bind the function to the right context.
};

This way you are effectively saying, that this function should be executed with the context of rMotoristaList instance.

Undefined variable in $.each() jquery

3 Answers3