-1

This is my function which i define in my service and i am calling this service method in my component but it return before the response has come from http api call, so i get undefined return data.

    home(){
       this._http
      .post("http://localhost:3000/home", {
      email: JSON.parse(this.cookieService.get("token")).email
    })
    .subscribe(data => {
      this.result = JSON.parse(data["_body"]);
     console.log(this.result); 
     send=>{return this.result}
    })
  }
Thientvse
  • 1,753
  • 1
  • 14
  • 23
Shubham Kumar
  • 2,171
  • 1
  • 13
  • 22

4 Answers4

1

Return the observable from your service like the following,

home() : Observable<any> { 
    return this._http
      .post("http://localhost:3000/home", {
          email: JSON.parse(this.cookieService.get("token")).email
      })
     .map(data => {
        let result = JSON.parse(data["_body"]);
        return result;
     });
}

And subscribe on the returned Observable from you component code like this,

this.chatService.home().subscribe((result) => { this.result = result; });
Fiyaz Hasan
  • 757
  • 5
  • 9
  • i get this error on using ur code ERROR in /Users/shubhamkumar/Sites/public_html/my-app/src/app/body/home/Home.component.ts (49,31): Property 'subscribe' does not exist on type 'void' – Shubham Kumar Nov 23 '17 at 09:55
  • make the service return `Observable`. see the edited code – Fiyaz Hasan Nov 23 '17 at 10:38
0

Your service function will be as below :

home() {
  return this._http.post("http://localhost:3000/home", {
    email: JSON.parse(this.cookieService.get("token")).email
  }).map((res:Response) => res.json());
}

then in your component you need to subscribe that service so that API call is made and you can store result in your component variable.

//Component code

componentFunction() {
  this.chatService.home().subscribe(data => {
    this.result = JSON.parse(data["_body"]);
    console.log(this.result);
  });
}
ranakrunal9
  • 13,320
  • 3
  • 42
  • 43
0

the "angular way" is that the service return a Observable. It's the component which subscribe to the service in an OnInit

//Your service
home(){
       return this._http  //<--return the http.post
      .post("http://localhost:3000/home", {
      email: JSON.parse(this.cookieService.get("token")).email
    }).map((res:Response) => res.json())

//Your component
    constructor(private myService:Service)
    //Normally in onOnInit
    ngOnInit()
    {
     this.myService.subscribe(data => {
        this.result=data;
      })
    }
Eliseo
  • 50,109
  • 4
  • 29
  • 67
0

From your comment you did 

this.result=this.chatService.home();

In your service, you do 

.subscribe(data => {
  this.result = JSON.parse(data["_body"]);
 console.log(this.result); 
 send=>{return this.result}
})

You're all doing it wrong.

When you make asynchronous HTTP calls, you need to assign values IN the subscribe. Since you call it in your component, you should instead do 

this.result=this.chatService.home()
  .subscribe(data => this.result = data);

In your service, you get this

home(){
 this._http
   .post("http://localhost:3000/home", {
     email: JSON.parse(this.cookieService.get("token")).email
   })
   .map(res => res.json())

What happens is that you move the subscribe logic to your component. You also need to use the map operator, because from what I've seen, you're dealing with JSON here : this.result = JSON.parse(data["_body"]);. Well, Angular Response objects have a json() method thought just for that purpose !