CODEWITHSUNDEEP
javascriptarraysobject
DevelopersWork
DevelopersWork

Reputation: 53

How to access javascript object Arrays inside prototype function

Hello I'm having a problem that haven't searched before

I'm trying to recode my javascript used for accessing google api's so that I can create objects to access them in further projects . Let me Explain the Code because I'm not posting the original code here below code is the just like an example of my code

I'm a having constructor function and it has arrays declared with 'this' keyword. and Then I have an prototype of the constructor function and inside that prototype I had a nameless function created to access jquery requested output from a server.But I'm unable to access those array objects

function cons(){
	this.objectarray = [];
}
cons.prototype.profun = function(){
	this.objectarray[0] = 'working';
	alert(this.objectarray[0]);//Access is possible
	$.get('requesting url',{'parameters'},function(data){
		alert(this.objectarray[0]);//Access is not possible
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

when I try to access the object inside that jquery function I'm getting this error from browser console

TypeError: this.YouTubeTitle is undefined

Upvotes: 2

Views: 1429

Answers (4)

DevelopersWork
DevelopersWork

Reputation: 53

I've found solution for this from one of the comments

the below code is the solution

function cons(){
	this.objectarray = [];
}
cons.prototype.profun = function(){
	this.objectarray[0] = 'working';
	alert(this.objectarray[0]);
	$.get('requesting url',{'parameters'},function(data){
		alert(this.objectarray[0]);
	}.bind(this));//by binding 'this' we can access the 'objectarray'
}

Thanks for the solution @Redu from comments

Upvotes: 1

Karen Grigoryan
Karen Grigoryan

Reputation: 5432

You can wrap your anonymous function with $.proxy to persist the outer this context.

function cons() {
  this.objectarray = [];
}
cons.prototype.profun = function() {
  this.objectarray[0] = 'working';
  alert(this.objectarray[0]);
  $.get('requesting url', {
    'parameters'
  }, $.proxy(function(data) {
    alert(this.objectarray[0]);
  }, this));
}

Upvotes: 0

Bj&#246;rn
Bj&#246;rn

Reputation: 489

Inside the GET-Callback there is a local this which overrides your Prototype-Function's this. Store the outer this in a named variable and call that inside the callback and you will be fine. 

let outerThis = this;
somethingWithCallback(function(){
  alert(outerThis);
})

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65796

You have to cache the this object so that when you use the this keyword in your callback, it refers to the correct object:

function cons(){
	this.objectarray = [];
}
cons.prototype.profun = function(){
  // this is volatile in JavaScript. It's meaning changes depending
  // on the invocation context of the code that contains it. Here,
  // this will refer to your "cons" object instance.
  var self = this;

	this.objectarray[0] = 'working';
	alert(this.objectarray[0]);
	$.get('requesting url','parameters',function(data){
    // But here, "this" will be bound to the AJAX object
		alert(self.objectarray[0]);  // <-- Use cached this object
	});
};

//*************************

var c = new cons();
c.profun();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Related Questions