Why is this array undefined?

Question

Below is my problem code:

var counter = new Counter();
counter.Load("20141211");

--

Counter = function () {
    this.Counters = new Array();
    this.Load = function (date) {
        $.getJSON("http://url", { "Date": date }, function (Count) {
            if (!Count.Error) {
                this.Counters[this.Counters.length] = Count;
            }
        });
    }
}

The line this.Counters[this.Counters.length] = Count; is where this.Counters is undefined and I don't understand why as it is defined above.

I would think it got defined when I call new Counter(), so it can be used later when I call counter.Load(). But it is simply undefined.

If I where to create this as a linear code it would work:

var Counters = new Array();
Counters[Counters.length] = Count;

for the record, `this.Counters = []` is faster than using `new Array()` — ndugger, Dec 12 '14 at 13:04
If you've written your code like that you'll get a `Counter is not defined` error. — Andy, Dec 12 '14 at 13:07

Jamiec · Answer 1 · 2014-12-12T13:09:02.340

Because scope!

Within the callback of $.getJSON, this no longer refers to the instance of your object. The easiest way round this is to use another variable (often self) to refer to the instance, and use this inside your callback:

Counter = function () {
    var self = this;
    self.Counters = new Array();
    self.Load = function (date) {
        $.getJSON("http://url", { "Date": date }, function (Count) {
            if (!Count.Error) {
                self.Counters[self.Counters.length] = Count;
            }
        });
    }
}

score 2 · Answer 2 · answered Dec 12 '14 at 13:03

2

The value of this changes when you're in the .getJSON callback. So save the value of this under a different variable name and use that value when you're in the callback.

answered Dec 12 '14 at 13:03

sahbeewah

2,690
1
12
18

score 1 · Accepted Answer · edited Dec 12 '14 at 13:16

1

Because you lost context. Add var self = this; in top of constructor, and into callback use self.Counters[self.Counters.length] = Count;

Counter = function () {
    var self = this;
    this.Counters = new Array();
    this.Load = function (date) {
        $.getJSON("http://url", { "Date": date }, function (Count) {
            if (!Count.Error) {
                self.Counters[self.Counters.length] = Count;
            }
        });
    }
}

edited Dec 12 '14 at 13:16

ndugger

7,373
5
31
42

answered Dec 12 '14 at 13:09

Vitalii Del Vorobioff

521
1
5
18

1

This answer is identical to @Jamiec's answer... – ndugger Dec 12 '14 at 13:15

Why is this array undefined?

3 Answers3