Angular 6 - How to point Service Functions to JSON Object without executing it

user_5541044 0
Viewed 75

I have stored a JSON like this 

to_be_load: {
  type: string;
  status: number;
  message: string;
  online: { fn: Promise<any>; message: string; };
  offline: { fn: Promise<any>; message: string; };
}[];

.

  this.to_be_load = [
      {
        type: 'floors',
        status: 0,
        message: 'Floors loading',
        online: {
          fn: this.floors.getFromCloud(),
          message: 'Floors loaded from cloud'
        },
        offline: {
          fn: this.floors.getFromLocal(),
          message: 'Floors loaded from local'
        }
      },
      {
        type: 'Categories',
        status: 0,
        message: 'Categories loading',
        online: {
          fn: this.category.getFromCloud(),
          message: 'Categories loaded from cloud'
        },
        offline: {
          fn: this.category.getFromLocal(),
          message: 'Categories loaded from local'
        }
      }]

My Goal is execute all functions in online field if it fails execute function from offline

My function to load these data look like this

private loadData() {
    for (const item of this.to_be_load) {
      item.online.fn.then(() => {
        item.status = 1;
        item.message = item.online.message;
        this.can_move();
      }).catch(() => {
        item.offline.fn.then(() => {
          item.status = 2;
          item.message = item.offline.message;
          this.can_move();
        }).catch(() => {
          item.status = 3;
          item.message = 'Error';
        });
      });
    }
  }

Here my problem is function start execute when i assign it to JSON , Is it there any possible way to fix this in angular or typescript way,

angular6 angular
1 Answers

You are not assigning the function, but result of the function. Should be like this:

this.to_be_load = [
  {
    type: 'floors',
    status: 0,
    message: 'Floors loading',
    online: {
      fn: () => this.floors.getFromCloud(),
      message: 'Floors loaded from cloud'
    },
    offline: {
      fn: () => this.floors.getFromLocal(),
      message: 'Floors loaded from local'
    }
  },
  {
    type: 'Categories',
    status: 0,
    message: 'Categories loading',
    online: {
      fn: () => this.category.getFromCloud(),
      message: 'Categories loaded from cloud'
    },
    offline: {
      fn: () => this.category.getFromLocal(),
      message: 'Categories loaded from local'
    }
  }]

And then:

private loadData() {
for (const item of this.to_be_load) {
  item.online.fn().then(() => {
    item.status = 1;
    item.message = item.online.message;
    this.can_move();
  }).catch(() => {
    item.offline.fn().then(() => {
      item.status = 2;
      item.message = item.offline.message;
      this.can_move();
    }).catch(() => {
      item.status = 3;
      item.message = 'Error';
    });
  });
}

In other words, fn: this.floors.getFromCloud() this assigns the result of getFromCloud() function. While this fn: () => this.floors.getFromCloud() defines a function. So that, you can call it later with item.online.fn() when needed.

user_15568570
Related