ajax - Using $.getJSON() with callback within a Javascript object - Stack Overflow

admin管理员组

文章数量:1289483

I'm trying to set up an object so that it has an encapsulated $.getJSON method. Here's my setup:

function Property(price, deposit){
  this.price = price;
  this.deposit = deposit;
  this.getMortgageData = function(){
    $.getJSON('='+this.price+'&d='+this.deposit+'&c=?', function(data){
        this.mortgageData = data;
    });
  }
  return true;
}

Now the problem seems to be that I don't have access to 'this' inside the getJSON callback function which makes sense.

Is there a workaround for this type of function or am I just thinking about this totally the wrong way? I've only ever really coded using PHP OO before so JS OO is a bit new to me.

Other things I've tried are:

  function Property(price, deposit){
  this.price = price;
  this.deposit = deposit;
  this.getMortgageData = function(){
    this.mortgageData = $.getJSON('='+this.price+'&d='+this.deposit+'&c=?', function(data){
        return data;
    });
  }
  return true;
}

But still,

var prop = new Property();
prop.getMortgageData();
// wait for the response, then
alert(prop.mortgageData.xyz); // == undefined

I'm trying to set up an object so that it has an encapsulated $.getJSON method. Here's my setup:

function Property(price, deposit){
  this.price = price;
  this.deposit = deposit;
  this.getMortgageData = function(){
    $.getJSON('http://example./index?p='+this.price+'&d='+this.deposit+'&c=?', function(data){
        this.mortgageData = data;
    });
  }
  return true;
}

Now the problem seems to be that I don't have access to 'this' inside the getJSON callback function which makes sense.

Is there a workaround for this type of function or am I just thinking about this totally the wrong way? I've only ever really coded using PHP OO before so JS OO is a bit new to me.

Other things I've tried are:

  function Property(price, deposit){
  this.price = price;
  this.deposit = deposit;
  this.getMortgageData = function(){
    this.mortgageData = $.getJSON('http://example./index?p='+this.price+'&d='+this.deposit+'&c=?', function(data){
        return data;
    });
  }
  return true;
}

But still,

var prop = new Property();
prop.getMortgageData();
// wait for the response, then
alert(prop.mortgageData.xyz); // == undefined

• javascript
• ajax
• jquery

Share Improve this question Follow asked Jan 27, 2011 at 15:56 David TuiteDavid Tuite 22.7k2525 gold badges114114 silver badges179179 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Your first attempt is close, but as you said, you can't access this inside the callback because it refers to something else. Instead, assign this to another name in the outer scope, and access that. The callback is a closure and will have access to that variable in the outer scope:

function Property(price, deposit){
  this.price = price;
  this.deposit = deposit;
  var property = this; // this variable will be accessible in the callback, but still refers to the right object.
  this.getMortgageData = function(){
    $.getJSON('http://example./index?p='+this.price+'&d='+this.deposit+'&c=?', function(data){
        property.mortgageData = data;
    });
  }
  return true;
}

本文标签： ajaxUsing getJSON() with callback within a Javascript objectStack Overflow