ionic2: API response data undefined?

Question

I'm using ionic2, I want to make login request to api server, but I have response => undefined this is the code in provider:

loginUser(email, password, macId, token) {
   let userObject = {
       "email": email,
       "password": password,
       "mac" : macId,
       "token" : token
   }
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    console.log('object: ',userObject);
    return this.http.post(this.loginUrl, userObject, {headers:headers})
    .map((response: Response) => response.json())    
  }

and this is the code in login page:

loginUser(email,password) {
console.log('email: ',email,'password: ',password);
if(!this.loginForm.valid){
 this.submitAttempt = true;
} else {
 this.submitAttempt = false;
 this.deviceInfo.macId = this.device.uuid;
 this.fcm.getToken().then(token=>{
   this.token = token;
   });
 this.userProvider.loginUser(email,password,this.deviceInfo.macId,this.token)
 .subscribe(data=> {
   alert("data is "+data);
 },
   (err)=>{
     alert("err"+err);
   }
 )


}

the output should be:

{
  msg : "SyGgTmNHxJcZFYJu6RootUHAqzdkhPNzsTGJHipeBZQSN8nHdbHga4gQ3jENesNPsK5tdtGKlmUa5g3cIVDO4ZqqENd5uPizwgWkq6z3CyUXAhyns8PTnNPwax7lgKRiY7I67qmiPCpZdwu2Kh5v7U"
}

but the actual output:

data: "undefined"

what should I do?

so the error output u get happens here: `this.userProvider.loginUser(email,password,this.deviceInfo.macId,this.token) .subscribe(data=> { alert("data is "+data); },`? — ewizard, Nov 22 '17 at 22:52
@ewizard http://fashion.fatimabalhaddad.com/public/api/login — Al-shimaa Adel, Nov 23 '17 at 07:46
log `response.json()` from `loginUser` function and see if it is undefined there....also instead of doing `return this.http.post(this.loginUrl, userObject, {headers:headers}) .map((response: Response) => response.json())` try `return this.http.post(this.loginUrl, userObject, {headers:headers})` without the `map` and instead of `.subscribe` with the `userProvider`...use `.then(data => { ...` — ewizard, Nov 23 '17 at 16:18
`subscribe` is for `observables` and im pretty sure `this.http.post` returns a promise which uses `then` instead of `subscribe` — ewizard, Nov 23 '17 at 16:24

score 1 · Accepted Answer · answered Nov 23 '17 at 16:51

You don't need to map it, just return the promise that is returned by this.http.post in your userProvider function and use .then() where you are calling it to get the data:

loginUser(email, password, macId, token) {
   let userObject = {
       "email": email,
       "password": password,
       "mac" : macId,
       "token" : token
   }
   var headers = new Headers();
   headers.append('Content-Type', 'application/json');
   headers.append('Access-Control-Allow-Origin', '*');
   console.log('object: ',userObject);
   return this.http.post(this.loginUrl, userObject, {headers:headers});  
}

and...

loginUser(email,password) {
  console.log('email: ',email,'password: ',password);
  if(!this.loginForm.valid){
  this.submitAttempt = true;
} else {
  this.submitAttempt = false;
  this.deviceInfo.macId = this.device.uuid;
  this.fcm.getToken().then(token=>{
    this.token = token;
  });
this.userProvider.loginUser(email,password,this.deviceInfo.macId,this.token)
     .then(data=> {
       alert("data is "+data);
     },
       (err)=>{
         alert("err"+err);
       }
     )
}

it works, thank you I removes map and use subscribe instead of then because I had error with then >> it is not decleared, what is the problem! — Al-shimaa Adel, Nov 29 '17 at 13:21

ionic2: API response data undefined?

1 Answers1