Problems when receiving list of Storage values in a variable (Ionic)

Question

I have the data stored in Storage as it is in the first image and in the second image the code that should assign the Storage values to the Prods variable. This code is in a method that I will call at the click of a button. But after I call the method and print the value of the variable Prods, it is as Undefined. :(

---

Button code, where the method is called (add or update) depending on the situation.

    <ion-button expand="block" icon-start (click)='add_or_update()'>

      <ng-template *ngIf="product.id;then btn_update; else btn_add"></ng-template>

      <ng-template #btn_update>
        <ion-icon name="create"></ion-icon>
        Atualizar
      </ng-template>

      <ng-template #btn_add>
        <ion-icon name="add"></ion-icon>
        Adicionar
      </ng-template>

    </ion-button>

Method that checks which action to perform (add or update)

add_or_update() {
  this.product.id ? this.update() : this.add();
}

Method add that will call the method that contains the problem code

add() {
    this.loadingService.present();
    this.product.profile = this.auth.user.profile_id;

    this.checkProductTagStorage(); // #### AQUI ####

    this.productService.add(this.product).subscribe(
      data => {
        this.loadingService.dismiss();
        this.toastService.success('Animal cadastrado com sucesso!');
        this.products.unshift(this.product);
        this.clear();
      },
      error => {
        this.loadingService.dismiss();
        this.toastService.error('Erro ao cadastrar produto!');
      }
    );
  }

Method in which the problem occurs

  checkProductTagStorage() {
    this.prods = [];

    this.storage.get('coovita-prods-list-type-1').then((data) => {
      this.prods = data;
      console.log(this.prods); // Imprimindo a variavel está com os dados corretos
    });

    console.log(this.prods); // Imprimindo aqui a variavel está vazia []
  }

Answer 1

When calling the function add() the browser will interpret line by line of this method. When he arrives at the this.checkProductTagStorage() he calls that function and he’s on to the next one line this.productService.add(this.product).subscribe(....

Your problem is precisely there because within the method checkProductTagStorage the stretch this.storage.get is executed asynchronously. Soon, this.prods is updated after the method add() has already been executed.

An example of what is happening with your code:

let prods = null;

function add1() {
  checkProductTagStorage1();
  console.log(prods);
}

function checkProductTagStorage1() {
  // Atualiza o prods depois de 200ms
  setTimeout(() => { prods = 1; }, 200);
}

add1();
setTimeout(() => { console.log(prods); }, 200);

One of the ways to solve is to use a Promise with the async\await:

    let prods = null;

    async function add1() {
      await checkProductTagStorage1();
      console.log(prods);
    }

    function checkProductTagStorage1() {
      return new Promise(resolve => {
        // Atualiza o prods depois de 200ms
        setTimeout(() => {
          prods = 1;
          resolve();
        }, 200);      
      });
    }

    add1();
    setTimeout(() => { console.log(prods); }, 200);

In your code it would be something like:

async add() {
    this.loadingService.present();
    this.product.profile = this.auth.user.profile_id;

    await this.checkProductTagStorage(); // #### AQUI ####

    this.productService.add(this.product).subscribe(
        data => {
            this.loadingService.dismiss();
            this.toastService.success('Animal cadastrado com sucesso!');
            this.products.unshift(this.product);
            this.clear();
        },
        error => {
            this.loadingService.dismiss();
            this.toastService.error('Erro ao cadastrar produto!');
        }
    );
}

checkProductTagStorage() {
    return new Promise(resolve => {
        this.prods = [];

        this.storage.get('coovita-prods-list-type-1').then((data) => {
            this.prods = data;
            console.log(this.prods); // Imprimindo a variavel está com os dados corretos

            resolve(); // Indica que a promise foi resolvida
        });

        console.log(this.prods); // Imprimindo aqui a variavel está vazia []
    });
}