Unable to update class variable after ajax call

Question

After getting two integer upon the ajax request has been completed, this.N and this.M are not getting set by storeDims() even if the dims has correctly been decoded. So it seems that I cannot acces this.N and this.M declared in the constructor. This is the code

class MapModel {

    constructor() {
        this.N; // need to initialize this after an ajax call
        this.M;
        this.seats = new Array();
        this.remote_seats = new Array();
    }

    init(callback) {
        let _this = this;
        $.when(
            _this.getDims(),
            _this.getSeats(),
        ).then(this.initMap(callback))
    }


    initMap(callback) {
        console.log(this.N); // prints undefined
        console.log(this.M); // this as well
        callback(this.N, this.M, this.seats);
    }

    getDims() {
        let _this = this;
        $.ajax({
            url: 'src/php/data.php',
            type: 'POST',
            data: {action: 'getDims'},
            success: function (result) {
                let dims = JSON.parse(result); // dims[0] = 10, dims[1] = 6
                _this.storeDims(dims);
            }
        });
    }

    storeDims(dims) {
        console.log(dims);
        this.N = parseInt(dims[0]);
        this.M = parseInt(dims[1]);
        console.log(this.N);
        console.log(this.M);
    }

    getSeats() {
    let _this = this;
    $.ajax({
        url: 'src/php/data.php',
        type: 'POST',
        data: {action: 'getSeats'},
        success: function (result) {
            let seats = JSON.parse(result);
            _this.storeSeats(seats);
        }
    });
}

storeSeats(seats) {
    this.remote_seats = seats;
    console.log(this.remote_seats);
}
}

Answer 1

You need to return the ajax promises from the getDms and getSeats functions

 getDims() {
        let _this = this;
        return $.ajax({
            url: 'src/php/data.php',
            type: 'POST',
            data: {action: 'getDims'},
            success: function (result) {
                let dims = JSON.parse(result); // dims[0] = 10, dims[1] = 6
                _this.storeDims(dims);
            }
        });
    }

you can even pass the values directly to the initMap

init(callback) {
        let _this = this;
        $.when(
          _this.getDims(),
          _this.getSeats()
        ).then(function(dims,seats) {_this.initMap(dims,seats,callback)})
    }


    initMap(dimsRaw,seatsRaw, callback) {
        let dims = JSON.parse(dimsRaw);
        console.log(dims[0]); 
        console.log(dims[1]); 
        callback(dims[0], dims[1], this.seats);
    }

Answer 2

The init promise callback is being called on the chain declaration, try adding a function wrapper:

    init(callback) {
        let _this = this;
        $.when(
            _this.getDims(),
        ).then(function() {_this.initMap(callback)})
    }