Angular 5, ionic 2 JSON refresh only works once

Question

I generated a JSON file and added it to one of my providers "people.ts":

getPeople(): Observable<any> {
    return this.http.get("https://randomuser.me/api/?results=10")
}

Then I wrote 2 functions which should reload and add more JSON objects once they are called (ionic infinite scroll and doRefresh functions) below:

constructor(public navCtrl: NavController,
              public service: People)
  {
    this.service.getPeople().subscribe( data => {
      this.people = data.results
    });
  }

  doRefresh(e) {
    this.service.getPeople()
    this.service.getPeople().subscribe( data => {
      this.people.unshift(...data.results),
        Error => console.log(Error),
        () => e.complete()
    });
  }
  doInfinite(e) {
    this.service.getPeople()
    this.service.getPeople().subscribe( data => {
      this.people.push(...data.results),
        Error => console.log(Error),
        () => e.complete()
    });
  }
 

The problem is that both work only once(they refresh and add) and the circle never stops spinning. What could I do ?

Photo of spinning circle in app

And that's where I call them:

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content>

    </ion-refresher-content>
  </ion-refresher>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content>

    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Answer 1

replace your doRefresh and doInfinite like below

doRefresh(e) {
this.service.getPeople().subscribe( (data) => {
  this.people.unshift(...data.results);

}, (Error) => console.log(Error), () => e.complete());


}



doInfinite(e) {
    this.service.getPeople().subscribe(  (data) => {
      this.people.push(...data.results);        

    },(Error) => console.log(Error),() => e.complete());
  }