ionic 3 - can't create alert inside http request - http

Question

So I'm using the native HTTP cordova plugin for my http requests. But I can't seem to wrap my head around a problem where I can't create an alert inside the onFail function. Anyone else experienced this?
The error says:
Error in Error callbackId: CordovaHttpPlugin1608257770 : TypeError: Cannot
read property 'alertCtrl' of undefined
Here's how I structured my code:
cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, function(response) {
try { //onSuccess
response.data = JSON.parse(response.data);
localStorage.setItem('token', JSON.stringify(response.data.token));
} catch(e) {
console.error('JSON parsing error');
}
}, function(response) { //onFail
console.log('403');
let alert = this.alerts.create({
title: 'Error',
subTitle: 'Username/password is invalid!',
buttons: ['Dismiss']
});
alert.present();
}
);
Here's how my constructor looks like:
constructor(public navCtrl: NavController,
private alerts: AlertController,
private http: HTTP,
private store: Storage,
) {}
What's causing it to not work?

Answer 1

Try this, because when you create alert in request "this" means httprequest so that hasn't alert class
let alert = this.alerts.create({
title: 'Error',
subTitle: 'Username/password is invalid!',
buttons: ['Dismiss']
});
cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, function(response) {
try { //onSuccess
response.data = JSON.parse(response.data);
localStorage.setItem('token', JSON.stringify(response.data.token));
} catch(e) {
console.error('JSON parsing error');
}
}, function(response) { //onFail
console.log('403');
alert.present();
}
);