Get data from API service angular 4

Question

I built a service, that gets a specific ID from an API observable. The service is working, if i console.log(data) from the service class, but i can't get the data in my component.

Service:

getSpecificStory(storyId) {
    return this.getToken()
      .map(idToken => {
        let headers = new Headers();
        headers.set('user_token', idToken)
        return this.http
          .get(`${this.apiUrl}/stories/${storyId}`, { headers: headers })
          .subscribe((res: Response) => {
            const data = res.json();
            console.log(data)
            return data;
          });
      })
      .catch(this.handleError);
  }

Component:

export class StoryModalComponent implements OnInit {
  story: any;
  storyId: any;
  hitsArray: Array<Object>;

  constructor(private storiesService: StoriesService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params
      .subscribe(
      params => {
        this.storyId = params['storyId']
      })
    console.log(this.storyId)
    this.getStoryObject();
  }


  getStoryObject() {
    console.log(this.storyId)
    this.storiesService.getSpecificStory(this.storyId)
      .subscribe(
      (data) => {
        this.story = data;
        console.log(this.story)
      })
  }
}

Like i've posted? You mean the HTML? By the way, don't mind the "getToken()" function - it's just for fetching the id_token of the user in the firebase backend. — blixenkrone
– blixenkrone, Commented Oct 16, 2017 at 13:07

LLai · Accepted Answer · 2017-10-16 13:23:08Z

1

You are looking for the flatMap operator instead of map.

getSpecificStory(storyId) {
    return this.getToken()
        .flatMap(idToken => {
            let headers = new Headers();
            headers.set('user_token', idToken)
            return this.http
                .get(`${this.apiUrl}/stories/${storyId}`, { headers: headers })
        });
    })
}

.flatMap expects you to return an observable (in your case the this.http.get(...)). Now the getSpecificStory method is returning an observable. So you an subscribe in your component

this.storiesService.getSpecificStory(this.storyId)
    .subscribe(
        (data) => {
            this.story = data;
            console.log(this.story)
         })

This is the common method when you are chaining dependent observables (your firebase getToken() method and your this.http.get())

answered Oct 16, 2017 at 13:23

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

blixenkrone Over a year ago

Yeah mate, that did the trick! Im still learning the RxJs lib., so thank you very much for this!

Himanshu Patel · Accepted Answer · 2017-10-16 13:10:45Z

1

You have to return observable in order to user subscribe method in comonent.

getSpecificStory(storyId) {
return this.getToken()
  .map(idToken => {
    let headers = new Headers();
    headers.set('user_token', idToken)
    return this.http
      .get(`${this.apiUrl}/stories/${storyId}`, { headers: headers })
      .map((res: Response) => res.json());
      .catch(this.handleError);
  })
  .catch(this.handleError);}

answered Oct 16, 2017 at 13:10

Himanshu Patel

824 bronze badges

1 Comment

blixenkrone Over a year ago

I don't see the difference from mine, except you're using "map"? If you look at the service, i am returning the data with "return data;"

Collectives™ on Stack Overflow

Get data from API service angular 4

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related