Initializing object with asynchonous request

Question

This is my object definition:

function DrilledLayer(sourceLayerName, sourceTableName, targetLayerName, targetFieldName, operators, baseLayer=false) {
        this.sourceLayerName = sourceLayerName;
        this.sourceTableName = sourceTableName;
        this.targetLayerName = targetLayerName;
        this.targetFieldName = targetFieldName;
        this.operators = operators;
        this.baseLayer = baseLayer;
        this.targetLayerId;
        this.drilledLayerId;
        this.selectedCode;
        this.redraw = false;

        this.getTargetLayerId(); //this function must initialize this.targetLayerId
}

DrilledLayer.prototype.getTargetLayerId = function(){
  $.soap({
    url: 'https://url/version_4.8/services/MapService',
    method: 'getLayersIdByName',
    appendMethodToURL: false,
    data : {
        mapInstanceKey: mapKey,
        layerName: this.targetLayerName,
    },
    error: function(){
        alert("error getLayersIdByName");
    },
    success: function(soapResponse){
        layerId = soapResponse.toJSON().Body.getLayersIdByNameResponse.getLayersIdByNameReturn.getLayersIdByNameReturn.text;
        this.targetLayerId = layerId;
    }
  });
}

This is how I create the object:

drillCs = new DrilledLayer("Drilled CS", "Cs_Franco_General.TAB", "RA_General", "Code_RA", "=")

If I look into drillCs object there is no targetLayerId property defined, but I know the soap request were made successfuly. Why?

`this` in your `success` function probably doesn't refer to your `DrilledLayer` object. You can assigned `this` to a local variable, and use that. — forgivenson, Oct 10 '14 at 13:32
a) It's async and you're looking too early b) you did get [the `this` context of your callback](http://stackoverflow.com/q/20279484/1048572) wrong — Bergi, Oct 10 '14 at 13:32
@BelowtheRadar: For a) you might be interested in [this alternative pattern](http://stackoverflow.com/a/24686979/1048572) for asynchronously initialisiing objects (instead of calling ajax from the constructor) — Bergi, Oct 10 '14 at 15:03

score 2 · Accepted Answer · answered Oct 10 '14 at 13:31

this in JavaScript is mostly set by how a function is called. this during the success callback won't be the same as this during your call to your getTargetLayerId function, you have to remember it.

In this case, the easiest way is probably with a variable:

DrilledLayer.prototype.getTargetLayerId = function(){
  var layer = this;                     // <=== Set it
  $.soap({
    url: 'https://url/version_4.8/services/MapService',
    method: 'getLayersIdByName',
    appendMethodToURL: false,
    data : {
        mapInstanceKey: mapKey,
        layerName: this.targetLayerName,
        },
    error: function(){
        alert("error getLayersIdByName");
     },
    success: function(soapResponse){
        layerId = soapResponse.toJSON().Body.getLayersIdByNameResponse.getLayersIdByNameReturn.getLayersIdByNameReturn.text;
        layer.targetLayerId = layerId; // <=== Use it
        }
    });
}

More (on my blog):

You must remember this

Separately, of course, you won't see the properly until the async callback fires (which will be some time after the new call returns), but you seem to be comfortable with the async aspect of this.

Initializing object with asynchonous request

1 Answers1