Angular 4 pagination in API

Question

I'm calling an API endpoint that uses pagination in the header. I want to make use of that, so I need to take two steps:

I need to parse the HTTP Link header.
I should implement pagination in Angular 4.

So currently, I have this service built:

getBooks() {
    return this.http
      .get(`${BaseService.baseUrl}/books`)
      .map(response => <Book[]> response.json());
}

Now I need to parse the headers from the response, but I'm not sure how to? I'm also not sure how I should build the pagination in my component.

Who could set me up with some help, please?

I'll briefly comment on the headers part. The response object contains a headers property. See the documentation here: angular.io/api/http/Response — Rob Zuber
– Rob Zuber, Commented Jun 20, 2017 at 16:38
How would I extract it? Currently I call the getBooks() service method in my component, so I already lost the headers thanks to the .map() method, right? — jbehrens94
– jbehrens94, Commented Jun 20, 2017 at 16:39
Sort of, yes. Within the map method you could map the response object to anything you want, including a JSON object of your own design that includes the headers (along with the Book[] you are already returning). Then the calling code would have access to both. — Rob Zuber
– Rob Zuber, Commented Jun 20, 2017 at 16:46

LLai · Accepted Answer · 2017-06-20 16:48:17Z

2

you'll need to grab the headers from the response.

getBooks() {
return this.http
  .get(`${BaseService.baseUrl}/books`)
  .map(response => {
    let headers = response.headers;
    let pagination = headers.get('pagination-header'); // get specific header
    // do something with header
    return {
      headers: headers,
      res: <Book[]>response.json()
    }
  );
}

edited Jun 20, 2017 at 16:48

answered Jun 20, 2017 at 16:41

LLai

13.5k3 gold badges45 silver badges46 bronze badges

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

3 Comments

jbehrens94 Over a year ago

Thanks so much! Now I need another piece of advice, if you don't mind. When I return that object, how do I use it in my component if I use the subscribe() method on the return value in the service?

LLai Over a year ago

so you would just subscribe to this observable. the value returned from the success callback of the subscribe will be what you returned from the map function. so now you can use the headers & json response as needed.

jbehrens94 Over a year ago

So the first parameter in the subscribe method will be the object with headers and response? Awesome, thanks!

Collectives™ on Stack Overflow

Angular 4 pagination in API

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related