Ionic 2: calling function after xhr.onload - ajax

Question

In ionic 2, I'm using below code to upload the file(.pdf and .doc extension) into server via API. But I'm not able to call any function after resp.success == 1 or not able to use any global variables.I'm getting error like property doesn't exist on type xmlhttpeventtarget As I want to navigate user to next page on successful submission of the file I need call some function inside success.
xhr.open('POST', "myurl", true);
xhr.onload = function() {
if (xhr.status == 200) {
var resp = JSON.parse(xhr.response);
console.log('Server got: in IOS ', resp);
console.log('Server got: in IOS ', resp.message);
if(resp.success == 1)
{
console.log("THIS IS SUCCESS")
}
else{
alert(resp.message)
return
}
};
}
xhr.send(this.fd);

Answer 1

A better way to solve this would be by using arrow functions like this:
xhr.open('POST', "myurl", true);
xhr.onload = () => {
if (xhr.status == 200) {
var resp = JSON.parse(xhr.response);
console.log('Server got: in IOS ', resp);
console.log('Server got: in IOS ', resp.message);
if(resp.success == 1) {
console.log("THIS IS SUCCESS");
// Now 'this' points to the component :) !!
this.yourcustomfunction();
this.yourvariableblename;
} else{
alert(resp.message)
return
}
};
}
xhr.send(this.fd);
Notice that now we do
xhr.onload = () => {...});
instead of
xhr.onload = function() {...});
By using arrow functions, the this property is not overwritten and still references the component instance (otherwise, the this keyword points to the inner function, and your custom method and variable are not defined in it).

Answer 2

Hi I found solution to this problem.By creating a variable which has this reference, the snippet is as below.
var self = this;
xhr.open('POST', "myurl", true);
xhr.onload = function() {
if (xhr.status == 200) {
var resp = JSON.parse(xhr.response);
console.log('Server got: in IOS ', resp);
console.log('Server got: in IOS ', resp.message);
if(resp.success == 1)
{
console.log("THIS IS SUCCESS")
self.yourcustomfunction()
self.yourvariableblename
}
else{
alert(resp.message)
return
}
};
}
xhr.send(this.fd);