Need help with observables

Ionic Framework ionic-v3
1

Ok, so I have an Api Service which gets a list of Offices…

export class ApiService {

    public getOffices()
    {
        let url = ``;
        let payload = {
            headers: null,
            params: {
                "action": "getOffices"
            }
        };

        let headers = new Headers({ "Content-Type": "application/json" });
        let requestOptions = new RequestOptions({ headers: headers });

        return this.http.post(url, JSON.stringify(payload.params), requestOptions)
            .map(res => res.json());
    }
}

and this goes to my UserController and saves as an office array,

 @Injectable()

    export class UserController {

        offices: any[];

        updateOffices() {

            this.apiService.getOffices().subscribe(
                data => {

                    // Success
                    this.offices = data.offices;
                },
                err => {
                    console.log("Error" + err);
                }
            );
        }
    }

now I’m trying to refresh a list of offices, but I can’t figure out how to get the list to dynamically update once the API call is complete. I need some sort of completion handler, which I think is what Observables are but I’m lost.

    export class OfficesPage {

      offices: any[];

      doRefresh(refresher) {

        this.userController.updateOffices();
        this.offices = this.userController.offices;
        this.officeCount = this.offices.length;
        this.updateDescription();
        refresher.complete();

        setTimeout(() => {
          refresher.complete();
        }, 2000);

      }

any help would be much appreciated.

Thanks

2

Do you mean update on the screen? Use the async pipe. I actually refactored my code a while back to eliminate subscribe as much as possible, instead relying on the async pipe and accurately-defined Observables. It’s much cleaner than before.

3

Yeah I just need the list to update when the api call is complete.

Refresh List > Calls UserController > Calls APIService > Updates List

4

Have you seen this example?

https://angular.io/docs/ts/latest/guide/server-communication.html#!#fetch-data