3

In component, i called dataservice method 'login' which calls post api. res.json() is giving correct response. But in component, when i try to access 'data' it is coming as undefined in subscribe. Don't know what i am doing wrong here. Please help.

dataService:

login(username, password): Observable<any>{       
    let data = { username: username, password: password};
    return this.http.post( this.domain + '/webservice/login', data)
                    .map( (res: Response) => {
                      res.json()                      
                    })
                    .catch( (error: any) => Observable.throw(error.json().error || 'server error') );

  }

component:

callLoginApi() {
    this.showLoading = true;
    this.dataService.login(this.username,this.password)
         .subscribe(data => {
              console.log(data);
          });
  }
developer033
  • 24,267
  • 8
  • 82
  • 108
Vivek
  • 223
  • 2
  • 6
  • Possible duplicate of [Component does not receive Data from Service](https://stackoverflow.com/questions/44746456/component-does-not-receive-data-from-service) – AT82 Jun 26 '17 at 05:11

2 Answers2

12

Replace

.map((res: Response) => {
  res.json()                      
})

by 

.map((res: Response) => {
  return res.json();
})

or by

.map((res: Response) => res.json())
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • What is the difference between `.map((res: Response) => res.json()) ` and `.map((res: Response) => { return res.json(); }) ` – SamuraiJack Apr 24 '18 at 09:21
  • There is none, except the first one is shorter and more idiomatic. – JB Nizet Apr 24 '18 at 17:45
  • There has to be some difference. Because I was getting undefined until i included `return` – SamuraiJack Apr 25 '18 at 05:45
  • 2
    No, there is none. You were probably using `.map((res: Response) => {res.json();})` which is very different, since the block returns nothing. If there is no block, the return is implicit. If there is one, you need to return. – JB Nizet Apr 25 '18 at 21:14
  • @JB Nizet Do you know where I could get some info about what you are explaining? I don´t understand what you mean with "since the block returns nothing. If there is no block, the return is implicit. If there is one, you need to return." Or the diffrence in this case between `.map((res: Response) => { return res.json(); })` and `.map((res: Response) => {res.json();})` Thanks a lot in advance –  Jul 06 '18 at 10:27
  • 1
    @FranP https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – JB Nizet Jul 06 '18 at 10:59
  • @JB Nizet now I understand better thanks yo tou, along with this another SO question https://stackoverflow.com/questions/28889450/when-should-i-use-return-in-es6-arrow-functions and the first answer. Just in case someone else needs. –  Jul 06 '18 at 15:53
0

Value is assigned but it not showing in visual studio. If you use _this instead of this in add watch then you can see the values. JavaScript uses _this. For some reason it is not supported by visual studio in subscribe.

Sankaranarayanan
  • 1