Promise/Observable Chaining in IONIC/Angular

Question

Personal I am new in IONIC/Angular and I do not understand yet very well Promise/Observable and would like a help ! I have the following situation:

1. User clicks on a button that will fetch information in the mobile Sqlite;
2. A foreach is made on return and called a webapi (http post) passing for each record the API;
3. At the end of the foreach I will execute 2 commands to delete the Sqlite tables;
4. And finally give a message to the user

However, I cannot define this sequence, in my code it deletes, gives the message to the user and then calls the API for each record. Below is an excerpt from the code

    SincronizarSistema() {
  let loading: Loading = this.showLoading('Sincronizando...');

  this.voucherService.sincronizarPedidoDetalheSistema()

  this.pedidosDetalhe = [];
  this.pedidosDetalheBase = [];
  this.carregarEventos();
  loading.dismiss();

  this.showAlert('Sincronização realizada com sucesso !')}

---

sincronizarPedidoDetalheSistema() {
 this.getDB().then(() => {
  let listaPedidosDetalhe: PedidoDetalhe[];

  this.retornaPedidosDetalheBaixados()
    .then((pedidosDetalhe: PedidoDetalhe[]) => {

      listaPedidosDetalhe = pedidosDetalhe

      listaPedidosDetalhe.forEach(element => {
        this.baixaPedidoDetalheSistema(element.idPedidoDetalhe)
          .subscribe(pedidoDetalhe => {
            console.log(`Pedido ${element.idPedidoDetalhe} baixado com sucesso !`)
          }, error => {
            console.log('Erro ao baixar pedido ', error)
          })
      });


      console.log("chegou aqui")
      this.db.executeSql('DELETE FROM tblPedidoDetalhe', [])
      this.db.executeSql('DELETE FROM tblEventoSincronismo', [])

    })
});}

Answer 1

Buddy, good night.

try like this:

listaPedidosDetalhe.forEach(element => {
    this.baixaPedidoDetalheSistema(element.idPedidoDetalhe)
      .subscribe(pedidoDetalhe => {
        console.log(`Pedido ${element.idPedidoDetalhe} baixado com sucesso !`)
        this.db.executeSql('DELETE FROM tblPedidoDetalhe', []);
        this.db.executeSql('DELETE FROM tblEventoSincronismo', [])!`);
      }, error => {
        console.log('Erro ao baixar pedido ', error)
      })
  });

Answer 2

I managed to do using forkJoin, but I did a test in an emulator turning off the internet (in this case it would give error for not being able to access the API) and did not fall in the catch

 this.voucherService.retornaPedidosDetalheBaixados()
    .then((pedidosDetalhe: PedidoDetalhe[]) => {
      this.pedidosDetalheBaixados = pedidosDetalhe
    })
    .then(() => {
      if (this.pedidosDetalheBaixados.length > 0) {
        const calls = [];

        this.pedidosDetalheBaixados.forEach((pedidoDetalhe: PedidoDetalhe) => {
          calls.push(this.voucherService.baixaPedidoDetalheSistema(pedidoDetalhe.idPedidoDetalhe))
        })
        return forkJoin(calls)
          .subscribe((sucess) => {
            this.voucherService.deletaBases();
            this.pedidosDetalhe = [];
            this.pedidosDetalheBase = [];
            this.carregarEventos();
            loading.dismiss();

            this.messageService.showToast('Sincronização realizada com sucesso !', '3000', 'bottom').subscribe(toast => { });
          },(erro) =>{
            this.messageService.showAlert('Não foi possível realizar e sincronização com o sistema')
          })
      } else {
        this.voucherService.deletaBases();
        this.pedidosDetalhe = [];
        this.pedidosDetalheBase = [];
        this.carregarEventos();
        loading.dismiss();

        this.messageService.showToast('Sincronização realizada com sucesso !', '3000', 'bottom').subscribe(toast => { });;
      }
    })
    .catch(() => {
      this.messageService.showAlert('Não foi possível realizar e sincronização com o sistema')
    })