jQuery/Javascript: variable NOT updating after GET call

Question

I'm trying to read from a text file and put the information inside it into an Array. However, it seems I am doing something wrong.

var Level = function(ctx) {
    this.ctx = ctx;
    this.lvlWidth = 0;
    this.lvlHeight = 0;

    this.map = [];


    this.loadLevel = function(){
    var start = 0;
    var end = 0;
    this.lvlHeight = 25;
    this.lvlWidth = 21;

    $.get("1.txt", function(data){
        start = data.indexOf("0");
        end = data.lastIndexOf("#");
        this.map = data.slice(start, end - 2).split(" ");
    }, "text");

    console.log(this.map);
   };
}; // end Level

On console, it says that my variable this.map is an EMPTY ARRAY. It doesn't modify itself, and I don't know why. I checked other answers and people said that this problem happens if you don't declare your variable (in my case map) outside the function, but you can clearly see that I did. Ironically enough, this.lvlWidth and this.lvlHeight DO change to 21 and 25 respectively. Can anyone tell me why does map doesn't update?

Here is the info of 1.txt (which is on the same folder as this file):

# startleveldata
0 0 0 0 0 0 0 0 0 113 21 113 0 0 0 0 0 0 0 0 0 
0 107 100 100 100 100 100 100 100 106 0 105 100 100 100 100 100 100 100 108 0 
0 101 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 101 0 
0 101 3 120 2 113 2 111 100 108 2 107 100 112 2 113 2 120 3 101 0 
0 101 2 2 2 101 2 2 2 101 2 101 2 2 2 101 2 2 2 101 0 
0 101 2 111 100 106 2 113 2 110 2 110 2 113 2 105 100 112 2 101 0 
0 101 2 2 2 2 2 101 2 2 2 2 2 101 2 2 2 2 2 101 0 
0 101 2 120 2 111 100 130 100 112 2 111 100 130 100 112 2 120 2 101 0 
0 101 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 101 0 
0 105 100 108 2 113 2 111 100 100 100 100 100 112 2 113 2 107 100 106 0 
0 0 0 101 2 101 2 2 0 0 10 0 0 2 2 101 2 101 0 0 0 
111 100 100 106 2 105 112 2 107 112 1 111 108 2 111 106 2 105 100 100 112 
20 0 0 0 2 0 0 2 101 11 12 13 101 2 0 0 2 0 0 0 20 
111 133 100 112 2 111 112 2 105 100 100 100 106 2 111 112 2 111 100 133 112 
0 101 2 2 2 0 0 2 0 0 0 0 0 2 0 0 2 2 2 101 0 
0 101 2 120 2 107 112 2 111 100 100 100 112 2 111 108 2 120 2 101 0 
0 101 2 2 2 101 2 2 0 0 4 0 0 2 2 101 2 2 2 101 0 
0 105 133 112 2 110 2 111 100 100 133 100 100 112 2 110 2 111 133 106 0 
0 0 101 2 2 2 2 2 2 2 101 2 2 2 2 2 2 2 101 0 0 
0 0 101 2 111 112 2 111 108 2 101 2 107 112 2 111 112 2 101 0 0 
107 100 106 2 2 2 2 2 101 2 101 2 101 2 2 2 2 2 105 100 108 
101 2 2 2 111 100 112 2 110 2 110 2 110 2 111 100 112 2 2 2 101 
101 3 120 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 120 3 101 
101 2 2 2 107 100 100 100 100 108 0 107 100 100 100 100 108 2 2 2 101 
105 100 100 100 106 0 0 0 0 110 21 110 0 0 0 0 105 100 100 100 106 
# endleveldata

EDIT: I made it work guys! Problem is I needed to call a callback function that would call this function again. Following user @ACOMIT001 advice, I used the .then() function after my $.get(). I extracted the $get function, put it on my main program, and on the .then() function I called loadLevel(), and it works. I can't really explain why but this works for me now. Thanks everyone for your help/

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — gyre, Apr 03 '17 at 00:44
If my answer solved your problem, then please mark my answer as as accepted. — ACOMIT001, Apr 06 '17 at 00:09

score 2 · Accepted Answer · answered Apr 03 '17 at 00:54

$.get is an asynchronous method. It returns straight away after being called rather waiting for a response from your server. Hence why this.map will be empty.

Try something like this:

var that = this;

$.get("1.txt", function(data){
    start = data.indexOf("0");
    end = data.lastIndexOf("#");
    that.map = data.slice(start, end - 2).split(" ");
}, "text").then(function () { 
    console.log(that.map); 
});

Also as the previous answer states, the scope of this is changing.

I wasn't sure if get was async or not but makes sense, this answer is more complete. — Etienne, Apr 03 '17 at 01:12

score 0 · Answer 2 · answered Apr 03 '17 at 00:50

I think it's because the scope of your this is changing. try this:

var that = this;
....
 $.get("1.txt", function(data){
    start = data.indexOf("0");
    end = data.lastIndexOf("#");
    that.map = data.slice(start, end - 2).split(" ");
}, "text");

console.log(that.map);

http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

jQuery/Javascript: variable NOT updating after GET call

2 Answers2