Need help with observables

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, JSON.stringify(payload.params), requestOptions)
            .map(res => res.json());

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


    export class UserController {

        offices: any[];

        updateOffices() {

                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.offices = this.userController.offices;
        this.officeCount = this.offices.length;

        setTimeout(() => {
        }, 2000);


any help would be much appreciated.


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.

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

Refresh List > Calls UserController > Calls APIService > Updates List

Have you seen this example?!#fetch-data