Troubleshooting issue with JavaScript promise not functioning properly using resolve() method

Question

Troubleshooting issue with JavaScript promise not functioning properly using resolve() method

I encountered an issue with promise usage in JavaScript. My objective was to retrieve data from firebase, store the results in an array, and then perform sorting on that array. Below is my code snippet:

    let promise = new Promise((resolve, reject) => {
    var query = firebase.database().ref('');
        query.once( 'value', data => {
            data.forEach(subtypeSnapshot => {
                var itemData = ;

                var query = firebase.database().ref('').child(itemKey);
                query.once( 'value', data => {
                    var itemDetail = ;
                    datasetarr.push();
                });
            }); 
            resolve(datasetarr);
        });             
    });

Upon inspecting the first console.log inside the promise, I observed the following output:

The successful retrieval from firebase indicates no issues with that part of the code. However, when attempting to store each element in the array using the line:

datasetarr.push({type: subtype, quantity: quantity});

Upon resolving the promise and checking the items within the array, nothing gets printed out during the for loop inside .then(). Any suggestions on how to address this?

javascript arrays for-loop asynchronous promise

Answer 1

Answer №1

It has been mentioned before that your Promise is being resolved too early.

To ensure all promises are resolved before resolving the wrapping Promise, you can utilize Promise.all. I have provided a simple example using functions returning Promises in place of a firebase database: https://jsfiddle.net/57b0gkLt/

As per the firebase documentation, query.once('value') yields a Promise, so this solution should work as expected.

EDIT: Implementation below

var datasetarr = [];
let promiseItemDataList = new Promise((resolve, reject) => {
var query = firebase.database().ref('receiptItemIDsByCategory').child(category);
    query.once( 'value', data => {
        var promises = []; // NEW LINE

        data.forEach(subtypeSnapshot => {
            var itemData = subtypeSnapshot.val();
            var itemKey = subtypeSnapshot.key;

            var query = firebase.database().ref('receiptItems').child(itemKey);
            var promise = query.once('value'); // NEW LINE
            promises.push(promise); // NEW LINE

            promise.then(data => { // .then instead of a callback
                var itemDetail = data.val();
                var subtype = itemDetail.type;
                var quantity = itemDetail.quantity;
                console.log('inside promise ' + subtype + ' ' + quantity);
                datasetarr.push({type: subtype, quantity: quantity});
            });
        }); 

        Promise.all(promises).then(() => resolve(datasetarr)); // NEW LINE
    });             
});

promiseItemDataList.then((arr) => {
    for(var i = 0; i < arr.length; i++){
        console.log('outside promise ' + arr[i].type + ' ' + arr[i].quantity);
    }
});

Answer 2

It has been mentioned before that your Promise is being resolved too early.

To ensure all promises are resolved before resolving the wrapping Promise, you can utilize Promise.all. I have provided a simple example using functions returning Promises in place of a firebase database: https://jsfiddle.net/57b0gkLt/

As per the firebase documentation, query.once('value') yields a Promise, so this solution should work as expected.

EDIT: Implementation below

var datasetarr = [];
let promiseItemDataList = new Promise((resolve, reject) => {
var query = firebase.database().ref('receiptItemIDsByCategory').child(category);
    query.once( 'value', data => {
        var promises = []; // NEW LINE

        data.forEach(subtypeSnapshot => {
            var itemData = subtypeSnapshot.val();
            var itemKey = subtypeSnapshot.key;

            var query = firebase.database().ref('receiptItems').child(itemKey);
            var promise = query.once('value'); // NEW LINE
            promises.push(promise); // NEW LINE

            promise.then(data => { // .then instead of a callback
                var itemDetail = data.val();
                var subtype = itemDetail.type;
                var quantity = itemDetail.quantity;
                console.log('inside promise ' + subtype + ' ' + quantity);
                datasetarr.push({type: subtype, quantity: quantity});
            });
        }); 

        Promise.all(promises).then(() => resolve(datasetarr)); // NEW LINE
    });             
});

promiseItemDataList.then((arr) => {
    for(var i = 0; i < arr.length; i++){
        console.log('outside promise ' + arr[i].type + ' ' + arr[i].quantity);
    }
});

Answer 3

Answer №2

The initial async call to retrieve the first set of data was executed correctly, however, subsequent calls triggered by the .forEach loop encountered issues.

query.once( 'value', data => {
    var itemDetail = data.val();
    var subtype = itemDetail.type;
    var quantity = itemDetail.quantity;
    console.log('processing promise ' + subtype + ' ' + quantity);
    datasetarr.push({type: subtype, quantity: quantity});
});

The problem arises from resolving the promise before all the async calls are completed.

It seems that the query.once function is not using promises or traditional callback functions in standard ways.

To address this issue, one workaround could be wrapping the asynchronous calls within a Promise object and then using Promise.all([list_of_promises]) to ensure that every call completes before resolving the main promise.

Pseudo code:

var datasetarr = [];
let promiseItemDataList = new Promise((resolve, reject) => {
    var query = firebase.database().ref('receiptItemIDsByCategory').child(category);
    query.once( 'value', data => {

        // Create an array of promises for each sub-item async call
        var get_data_promises = [];
        data.forEach(subtypeSnapshot => {
            get_data_promises.push(new Promise(function(resolve) {
                var itemData = subtypeSnapshot.val();
                var itemKey = subtypeSnapshot.key;
                var query = firebase.database().ref('receiptItems').child(itemKey);

                query.once( 'value', data => {
                    var itemDetail = data.val();
                    var subtype = itemDetail.type;
                    var quantity = itemDetail.quantity;
                    console.log('inside promise ' + subtype + ' ' + quantity);
                    datasetarr.push({type: subtype, quantity: quantity});
                    resolve("Done");
                });
        }))

        // Execute all promises and then resolve the main promise
        Promise.all(get_data_promises).done(function() { resolve(datasetarr); });
    });
});

Answer 4

The initial async call to retrieve the first set of data was executed correctly, however, subsequent calls triggered by the .forEach loop encountered issues.

query.once( 'value', data => {
    var itemDetail = data.val();
    var subtype = itemDetail.type;
    var quantity = itemDetail.quantity;
    console.log('processing promise ' + subtype + ' ' + quantity);
    datasetarr.push({type: subtype, quantity: quantity});
});

The problem arises from resolving the promise before all the async calls are completed.

It seems that the query.once function is not using promises or traditional callback functions in standard ways.

To address this issue, one workaround could be wrapping the asynchronous calls within a Promise object and then using Promise.all([list_of_promises]) to ensure that every call completes before resolving the main promise.

Pseudo code:

var datasetarr = [];
let promiseItemDataList = new Promise((resolve, reject) => {
    var query = firebase.database().ref('receiptItemIDsByCategory').child(category);
    query.once( 'value', data => {

        // Create an array of promises for each sub-item async call
        var get_data_promises = [];
        data.forEach(subtypeSnapshot => {
            get_data_promises.push(new Promise(function(resolve) {
                var itemData = subtypeSnapshot.val();
                var itemKey = subtypeSnapshot.key;
                var query = firebase.database().ref('receiptItems').child(itemKey);

                query.once( 'value', data => {
                    var itemDetail = data.val();
                    var subtype = itemDetail.type;
                    var quantity = itemDetail.quantity;
                    console.log('inside promise ' + subtype + ' ' + quantity);
                    datasetarr.push({type: subtype, quantity: quantity});
                    resolve("Done");
                });
        }))

        // Execute all promises and then resolve the main promise
        Promise.all(get_data_promises).done(function() { resolve(datasetarr); });
    });
});

Answer 5

Answer №3

let fetchItemsByCategory = (category) => {
    let query = firebase.database().ref('receiptItemIDsByCategory').child(category);

    query.once('value')
    .then((data) => {
        let promises = [];
        data.forEach(subtypeSnapshot => {
            let itemData = subtypeSnapshot.val();
            let itemKey = subtypeSnapshot.key;

            let subQuery = firebase.database().ref('receiptItems').child(itemKey);
            let p = subQuery.once( 'value', data => {
                        let itemDetail = data.val();
                        let subtype = itemDetail.type;
                        let quantity = itemDetail.quantity;
                        console.log('Processing promise for ' + subtype + ' with quantity ' + quantity);
                    });
            promises.push(p);
        });
        return promises;
    })
    .then(arrayOfPromises => {
        Promise.all(arrayOfPromises)
        .then(results => {
            console.log(results);
        });
    });
}

Answer 6

let fetchItemsByCategory = (category) => {
    let query = firebase.database().ref('receiptItemIDsByCategory').child(category);

    query.once('value')
    .then((data) => {
        let promises = [];
        data.forEach(subtypeSnapshot => {
            let itemData = subtypeSnapshot.val();
            let itemKey = subtypeSnapshot.key;

            let subQuery = firebase.database().ref('receiptItems').child(itemKey);
            let p = subQuery.once( 'value', data => {
                        let itemDetail = data.val();
                        let subtype = itemDetail.type;
                        let quantity = itemDetail.quantity;
                        console.log('Processing promise for ' + subtype + ' with quantity ' + quantity);
                    });
            promises.push(p);
        });
        return promises;
    })
    .then(arrayOfPromises => {
        Promise.all(arrayOfPromises)
        .then(results => {
            console.log(results);
        });
    });
}

Troubleshooting issue with JavaScript promise not functioning properly using resolve() method

Answer №1

Answer №2

Answer №3

Similar questions

Menu rollout problem when clicking or hovering

Locate a user within an array in Angular 5 by inputting a specific character into a textarea before initiating the search

An error is occurring with the URL request being made

Inserting a singular deeply nested item within a collection

Assigning a unique date/time stamp to every MongoDB document when it is created

Replace an NPM package with a completely different package

The destroySlider() function of BxSlider fails to work due to either an undefined slider or a function that is not

The AngularJS controller does not have its array initialized

smoothly slides into view and playfully bounces

There was an AJAX post error that occurred due to the refusal to set an unsafe header with the name "Connection"

how to extract the inner elements from an array in PHP

"Encountering issues with pointers while trying to access an array that has been successfully

TextGeometry failing to render

Laravel and Vue collaborate for an intelligently designed autocomplete feature

How do you go about installing the most recent version of a module through Private NPM?

Regular expression for eliminating the local path from a website address

Updating data from an API within a div using AJAX calls in a React application

Having trouble getting a value from a textbox to PHP using jQuery - can anyone lend a hand?

Converting a D3 tooltip using i18next for multilingual support

What is the best way to generate a new array from an existing array in C that replicates each element of the original array up to the first tab character?