Retrieving Data in Typescript Async Function: Ensuring Data is Returned Once All Code is Executed

Question

Retrieving Data in Typescript Async Function: Ensuring Data is Returned Once All Code is Executed

I need help with waiting for data to be retrieved before returning it. The code below fetches data from indexedDB and sends it back to a component. I understand that observables or promises can accomplish this, but I am struggling with how to implement them properly. Currently, the return statement executes before the code above completes.

retrieveData() {
    let dbReq = indexedDB.open('myChatDb', 1);
    let db;
    let objectStore;
    let results;
    let transaction;
    let data = new Array();
   dbReq.onsuccess = function (event) {
      db = (event.target as IDBOpenDBRequest).result;
      transaction = db.transaction(["customer-messages"]);
      objectStore = transaction.objectStore('customer-messages');
      results = objectStore.openCursor();
      results.onsuccess = function (event) {
        let cursor = event.target.result;
        if (cursor) {
         data.push(cursor.value);
         cursor.continue();
        } else {
        console.log(data);
        console.log(data.length + " array length line 36");
        }
      }
      return data;
    }

angular typescript async-await

Answer 1

Answer №1

To simplify the handling of event handlers, you can create a function that returns a promise and then use await:

function establishConnection(databaseName) {
    return new Promise((resolve, reject) => {
        let request = indexedDB.open(databaseName, 1);

        request.onsuccess = () => resolve(request.result);
        request.onerror = (event) => reject(new Error('Failed to connect to database'));
    });
}

function fetchObjectStoreData(objectStore) {
    return new Promise((resolve, reject) => {
        let results = objectStore.openCursor();
        let data = [];

        results.onerror => () => reject(new Error('Error fetching data from object store.'));
        results.onsuccess = () => {
            let cursor = event.target.result;
            if (cursor) {
                data.push(cursor.value);
                cursor.continue();
            } else {
                resolve(data);
            }
        };
    });
}        


async getData() {
    const db = await establishConnection('myDatabase');
    const transaction = db.transaction(["transaction-data"]);
    const objectStore = transaction.objectStore('transaction-data');
    
    return await fetchObjectStoreData(objectStore);
}

Answer 2

To simplify the handling of event handlers, you can create a function that returns a promise and then use await:

function establishConnection(databaseName) {
    return new Promise((resolve, reject) => {
        let request = indexedDB.open(databaseName, 1);

        request.onsuccess = () => resolve(request.result);
        request.onerror = (event) => reject(new Error('Failed to connect to database'));
    });
}

function fetchObjectStoreData(objectStore) {
    return new Promise((resolve, reject) => {
        let results = objectStore.openCursor();
        let data = [];

        results.onerror => () => reject(new Error('Error fetching data from object store.'));
        results.onsuccess = () => {
            let cursor = event.target.result;
            if (cursor) {
                data.push(cursor.value);
                cursor.continue();
            } else {
                resolve(data);
            }
        };
    });
}        


async getData() {
    const db = await establishConnection('myDatabase');
    const transaction = db.transaction(["transaction-data"]);
    const objectStore = transaction.objectStore('transaction-data');
    
    return await fetchObjectStoreData(objectStore);
}

Answer 3

Answer №2

One way to accomplish this is by utilizing the power of async and await in your code structure. By converting the retrieveData function into an asynchronous function and strategically placing the await keyword where necessary, you can streamline the process of fetching data from a database.

async retrieveData() {
let dbReq = indexedDB.open('myChatDb', 1);
let db;
let objectStore;
let results;
let transaction;
let data = new Array();
await dbReq.onsuccess = function (event) {
  db = (event.target as IDBOpenDBRequest).result;
  transaction = db.transaction(["customer-messages"]);
  objectStore = transaction.objectStore('customer-messages');
  results = objectStore.openCursor();
  results.onsuccess = function (event) {
    let cursor = event.target.result;
    if (cursor) {
     data.push(cursor.value);
     cursor.continue();
    } else {
    console.log(data);
    console.log(data.length + " array length line 36");
    }
  }
  return data;
}

Answer 4

One way to accomplish this is by utilizing the power of async and await in your code structure. By converting the retrieveData function into an asynchronous function and strategically placing the await keyword where necessary, you can streamline the process of fetching data from a database.

async retrieveData() {
let dbReq = indexedDB.open('myChatDb', 1);
let db;
let objectStore;
let results;
let transaction;
let data = new Array();
await dbReq.onsuccess = function (event) {
  db = (event.target as IDBOpenDBRequest).result;
  transaction = db.transaction(["customer-messages"]);
  objectStore = transaction.objectStore('customer-messages');
  results = objectStore.openCursor();
  results.onsuccess = function (event) {
    let cursor = event.target.result;
    if (cursor) {
     data.push(cursor.value);
     cursor.continue();
    } else {
    console.log(data);
    console.log(data.length + " array length line 36");
    }
  }
  return data;
}

Retrieving Data in Typescript Async Function: Ensuring Data is Returned Once All Code is Executed

Answer №1

Answer №2

Similar questions

Is there a possibility for the code following the await call to be executed in a random order if an async Vuex action is triggered twice?

The traditional function does not have access to a reference to this

Having difficulty troubleshooting the /app router application on version 13.4.x

Utilizing a created OpenAPI client within a React application

Challenges with Initializing Angular 2 Router

I am having trouble retrieving child interface data from API using Angular. Can someone help me figure out what I am doing

Assign a value to a locally scoped variable within an iteration in Angular 2

Is it possible for a TypeScript function to be used as a React prop even if it conflicts with the function signature's in

What is the reason behind TypeScript's lack of reporting an incorrect function return type?

Steps to resolve the "Module not found" error when executing the npm run build command

Turn off context menus in the Nebular interface when certain conditions are met

What steps are required to transition an Angular application developed without the Angular CLI into an Angular CLI project?

Navigating through Expo with Router v3 tabs, incorporating stack navigation, search functionality, and showcasing prominent titles

Using React to map and filter nested arrays while also removing duplicates

Dealing with Angular: unresolved promise error occurring with the utilization of pipe and mergemap

Tips for concealing information within the column labeled company Name with respect to the field designated as Company Name

Passing a click event to a reusable component in Angular 2 for enhanced functionality

Transferring data to a different module

Unexpected results can occur when using ngClass and CSS with all unset

Attempting to populate an array with .map that commences with a designated number in Angular using Typescript