angular load data in component only when indexedDb table is populated

Published

In my service I have this:

  synchronizeCitiesOnLogin() {
    ....
    this.getCitiesFromApi().subscribe(
      cities => {
        cities.map((city) => {
            this.addCityToIndexedDb(city);
        });
      }
    );
  }
  getCitiesFromApi() {
    ....
    return this.apiClient.get(url, { })
      .pipe(
        map((response: any) => response.data ),
        catchError(errorRes => {
          return throwError(errorRes);
        })
      );
  }
  addCitiesToIndexedDb(city) {
    this.cityTable
      .add(city)
      .then(async () => {
        const allItems: CityModel[] = await this.cityTable.toArray();
      })
      .catch(e => {
        alert('Error: ' + (e.stack || e));
      });
  }
    getData(): Promise<any> {
        return this.getDataFromIndexedDb()
    }
    private async getDataFromIndexedDb() {
       ...
       ... 
       return mydata
    }

In my component:

ngOnInit() {
    this.myService.getData().then(data => {
      this.worldCities= data;
    });
}

Because I have a lot of data that I receive from the API it will take some time to save all of them in the IndexedDB. And when I load the page the "fruits" object will be empty because the data were not saved yet in the IndexedDB …
It’s working if I’m adding a settimeout with 2-3 seconds but for sure it should be a better way to solve it
Can somebody help me with this ?
Thank you

Source: Angular Questions

Published
Categorized as angular, indexeddb, javascript Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq