Javascript OOP and jQuery can't touch object properties

Question

How do i edit property variables from within jquery as shown in the example below:

function Timetable(){
    this.timetables=[];
    //get timetable data for currentUser
     $.get('http://someurl.com/api',function(data){
         this.timetables.concat($.parseJSON(data));
    });
}

What seems to happen is that the this.timetables seems to be out of the variable scope.

Please capitalize constructor names and use `[]` instead of `Array()` or `new Array()`. — Ry-, Feb 03 '14 at 02:38
It didn't even occur to me that this was a constructor at first. — reergymerej, Feb 03 '14 at 02:44
My bad, new to all these conventions haha. But I will use them! — thegalah, Feb 03 '14 at 02:58
[This book](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) is a good place to start. — reergymerej, Feb 03 '14 at 03:20

reergymerej · Accepted Answer · 2014-02-03T03:24:17.837

1

You don't need to use this, you need to create a closure.

function timetable(){

  // create a closure
  var timetables = Array();

  //get timetable data for currentUser
  $.get('http://someurl.com/api',function(data){

    // this references the Array created above
    that.timetables = that.timetables.concat($.parseJSON(data));
  });
}

It just occurred to me that you may be using timetable to create objects. As a side note, if that's the case, the convention is to call it Timetable for clarity. If that's the case, use something like this.

function Timetable () {

  // store a reference to the scope
  var that = this;

  // create an instance property of the Timetable object
  this.timetables = [];

  $.get('http://someurl.com/api',function(data){

    // use our scope reference captured above
    // to update the timetables property
    that.timetables = that.timetables.concat($.parseJSON(data));
  }); 
}

var t = new Timetable();

// once the get call is complete
console.log(t.timetables);

edited Feb 03 '14 at 03:24

answered Feb 03 '14 at 02:30

reergymerej

2,371
2
26
32

Sorry, I goofed while editing. It should now make more sense. – reergymerej Feb 03 '14 at 02:38
You were spot on with the object thing. I don't really know much about conventions haha (I'm new). It doesn't throw any more errors, however it doesn't update the property. Console log shows: [] and also from the DOM inspector in firebog: [] – thegalah Feb 03 '14 at 02:56
Yeah, that's probably because you're evaluating before it's loaded. – reergymerej Feb 03 '14 at 02:59
Put the `console.log` part into the console after the get call completes. Just open the console after the script runs at type `t.timetables`. – reergymerej Feb 03 '14 at 03:01
I think it has something to do with the jquery like Jivan says. The values do not change with this method. I'm going to have to settle returning a value from my jquery function for now until I can find a cleaner solution – thegalah Feb 03 '14 at 03:21
1

Bah, I'm too tired. `that.timetables = that.timetables.concat($.parseJSON(data));` Dur. – reergymerej Feb 03 '14 at 03:23
I see that works! Js variable scope is really confusing – thegalah Feb 03 '14 at 03:27

Yves Lange · Answer 2 · 2015-02-04T11:29:59.187

1

Force the scope.

var scope = this;

Then you can use scope inside instead of "this" from jQuery

edited Feb 04 '15 at 11:29

answered Feb 03 '14 at 02:31

Yves Lange

3,914
3
21
33

score 1 · Answer 3 · edited May 23 '17 at 10:31

It's because inside your callback function, the scope of this is not the same. It now refers to the object bound to your callback function ($ in this case).

Earlier answers to your question already advised you on a concrete way out of your trouble, so I'm not of much help there.

But if you want a (very) detailed and absolutely worth-reading answer about this topic in a broader sense, you should definitely read this post (see the accepted answer).

This other one about closures (what you seem to need here) could also be of great help.

Javascript OOP and jQuery can't touch object properties

3 Answers3