How to get data in all the pages of an API http request using observables in Angular?

Question

I am making an http.get request to an API to get data. The API uses pagination and contains 30 entries/page. It also provides information about next page and last page along with respective links (also prev page and first page when applicable) in the response header links.

The Link header includes pagination information:

<https://api.example.com/user?page=2>; rel="next", 
<https://api.example.com/user?page=10>; rel="last"

The JSON object in response.body

[
  {
    userId: 1,
    name: 'John',
    created_at: "2015-10-13T03:10:43Z",
  },
  {
    userId: 2,
    name: 'Jane',
    created_at: "2019-02-15T13:37:03Z",
  }
....
]

I am using angular 6 and trying to accumulate the data by making subsequent http.get calls. I have tried to use array method push() for subsequent data. But the since the typeof resp.body is object it is not working.

userData: any[];

getData(url: string) {
    this.http.get(url, {observe: 'response'});
        .subscribe((resp) => {
        this.userData.push(resp.body);
}

Error message: TypeError: Cannot read property 'push' of undefined

The userData should contain array of data received from http.get requests which is iterable.

Possible duplicate of [Cannot read property 'push' of undefined Javascript](https://stackoverflow.com/questions/30350445/cannot-read-property-push-of-undefined-javascript) — Heretic Monkey, Feb 18 '19 at 18:37

score 2 · Answer 1 · answered Feb 18 '19 at 18:32

2

You can't .push to an uninitialized array.

Try doing this:

userData = [];

answered Feb 18 '19 at 18:32

DeborahK

57,520
12
104
129

score 1 · Answer 2 · answered Feb 18 '19 at 18:33

1

userData: any[] = [];

userData is not initialized which is throwing this error. Try it with empty Array.

answered Feb 18 '19 at 18:33

Nirav

602
1
10
28

score 1 · Accepted Answer · answered Feb 18 '19 at 23:43

1

as mentionned in previous answer you should initialize your array before you can use push() on it.

But if I understand well you receive an array of user for each response. By using push on each response you will obtain an array of array. You should either use concat to merge the two arrays or use a foreach on the response and then push.

also I would recommend you using interfaces or classes and try to avoid any

interface UserData {
  userId: number;
  name: string;
  created_at: string;
}

userData: UserData[] = [];

getData(url: string) {
  this.http.get(url, {observe: 'response'})
    .subscribe((resp) => {
      resp.body.forEach((user: UserData) => {
        this.userData.push(user);
      });
    });
}

answered Feb 18 '19 at 23:43

Didier Corronel

325
3
11

initialising the array and concat does the trick in the right way. But I still do not understand the use of interface. Could you shed some light on this or point me to the right direction? – Harman Feb 19 '19 at 09:46
using interfaces is just best practice. Your IDE will give you more help, hints, autocompletion if you use them. using "any" may seem more convenient because it let's you do what you want but it makes code harder to understand and increase the risk of errors. – Didier Corronel Feb 19 '19 at 12:46

score 1 · Answer 4 · answered Feb 19 '19 at 07:14

Initialize the array at first then push, The following code looks like this.

userData: any[] = [];

getData(url: string) {
  this.http.get(url, {
   observe: 'response'
  });
  .subscribe((resp) => {
     // this.userData = [];
     this.userData.push(resp.body);
}

How to get data in all the pages of an API http request using observables in Angular?

4 Answers4