angular 5 - how get subscribe component from service

Question

I would like get data in service , but i don't know how do it.

This is my methode service calendar:

  setWbsRdv(RDV: CalendarModel) {//enregistre le rendez-vous
    this._http.post<CalendarModel>(this.wbsSaveDate, { RDV }).subscribe((data) => {
      return data; //if console.log(data) is retourn "save ok"
    }, (error) => {
    })

this is my component is call service calendar

  validRDV() {
   // console.log(this._RDV);
    this._visiteur.getWbsJwt().subscribe(
      apiJwt => {
        this._visiteur.jeton = apiJwt;//enregistrement du jeton pour une utilisation ultérieure un autre composant
        this._RDV.setJwt(apiJwt); // !! important injecter le jeton dans l'objet RDV
        let reponse = this._calendarService.setWbsRdv(this._RDV); //enregistrement du RDV   
        console.log(response);

      }
    );
  }

the console.log(response) is undifined , how correctly to load this response for show in my template ?

thanks for help

score 1 · Answer 1 · answered Apr 12 '18 at 08:35

You need inside the getWbsJwt().subscribe again subscribe to the setWbsRdv. Remove the subscribe part from the setWbsRdv and move into the component.

apiJwt => {
    this._visiteur.jeton = apiJwt;
    this._RDV.setJwt(apiJwt);
    this._calendarService.setWbsRdv(this._RDV).subscribe(here your logic);       
}

score 0 · Answer 2 · answered Apr 12 '18 at 08:47

Do not implement 'subscribe' in your service. 'subscribe must be implemented by the consumer you use. Please code as below.

  setWbsRdv(RDV: CalendarModel) {
   return this._http.post<CalendarModel>(this.wbsSaveDate, { RDV });
}

  validRDV() {
   // console.log(this._RDV);
    this._visiteur.getWbsJwt().subscribe(
      apiJwt => {
        this._visiteur.jeton = apiJwt;//enregistrement du jeton pour une utilisation ultérieure un autre composant
        this._RDV.setJwt(apiJwt); // !! important injecter le jeton dans l'objet RDV
        let reponse = this._calendarService.setWbsRdv(this._RDV).subscribe((data) => {
      return data; //if console.log(data) is retourn "save ok"
    }, (error) => {
    }); //enregistrement du RDV   
        console.log(response);

      }
    );
  }

score 0 · Answer 3 · answered Apr 12 '18 at 09:05

You should use rxjs catch/throw operators and combine them with an Observable in your service. Do it like this:

import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/catch'
import 'rxjs/add/observable/throw'

@Injectable()
export class MyService {

errorHandler (error) {
    return Observable.throw(error.error.message)
  }

testFunction (body): Observable<any> {
    return this.http
    .post('some-route', body, httpOptions)
    .catch(this.errorHandler)
  }

}

And in your component do it like this:

this._myService.testFunction(bodyObject).subscribe(
    res => {
        // this block is executed if you receive a valid response from your server
    },
    err => {
        // here is here your Observable will throw an error if it occurs
        // this block is executed if you receive an error from your server
    }
)

This is by far the best approach to keep your code clean and well organized.

angular 5 - how get subscribe component from service

3 Answers3