JavaScript multi-level promises skipped .then()

Question

I was having some problem with multi-level of promises. What I tried to do is first get list of receipt items under certain category, then for each receipt item, I get its detail & receipt ID, after I get the receipt ID, I search for the account ID. Then, I get the account details based on account ID. Here is my code:

var query =  // get receipt items under certain category
    var outerPromise = query.once('value').then(data => {
        var promises = [];
        var datasetarr = [];
        
        data.forEach(snapshot => {
            var itemData = // get receipt item unique push ID
            
            var query = // get details of receipt items 
            var promise = query.once('value').then(data => { 
                var itemDetail = // get receipt item detail
                
                if(type == subtype){    
                    var receiptID = itemDetail.receiptID;

                    var query = // query receipts table by receiptID
                    return query.once('value').then(data => {   
                        data.forEach(snapshot => {
                            snapshot.forEach(childSnapshot => {
                                if(childSnapshot.key == receiptID){
                                    var accountKey = // get accountID
                                    
                                    var query = // query accounts table
                                    return query.once('value').then(data => {
                                        var accountDetail = data.val();
                                        var age = accountDetail.age;
                                        var gender = accountDetail.gender;
                                        console.log(age + ' ' + gender);
                                        datasetarr.push({age: age, gender: gender});
                                    });
                                }
                            });
                        });
                    }); 
                }
            });
            promises.push(promise);
        }); 

        return Promise.all(promises).then(()=> datasetarr);
});

I managed to print out the result from the console.log above. However, when I tried to print out here which is when the promise is done:

outerPromise.then((arr) => {
        console.log('promise done');
        for(var i = 0; i < arr.length; i++){
            console.log(arr[i].age + ' ' + arr[i].gender);
        }
    }); 

I get nothing here. The console now is showing 'promise done' first before any other results I printed out above.

How can I do this correctly?

Answer 1

I will provide a more detailed explanation in a couple of hours, I have a prior engagement which means I can't provide details now

First step to a "easy" solution is to make a function to make an array out of a firebase snapshot, so we can use map/concat/filter etc

const snapshotToArray = snapshot => {
    const ret = [];
    snapshot.forEach(childSnapshot => {
        ret.push(childSnapshot);
    });
    return ret;
};

Now, the code can be written as follows

// get list of receipt items under category
var query // = // get receipt items under certain category
var outerPromise = query.once('value').then(data => {
    return Promise.all(snapshotToArray(data).map(snapshot => {
        var itemData // = // get receipt item unique push ID
        var query // = // get details of receipt items 
        return query.once('value').then(data => { 
            var itemDetail // = // get receipt item detail
            if(type == subtype){    
                var receiptID = itemDetail.receiptID;
                var query //= // query receipts table by receiptID
                return query.once('value').then(data => {   
                    return Promise.all([].concat(...snapshotToArray(data).map(snapshot => {
                        return snapshotToArray(snapshot).map(childSnapshot => {
                            if(childSnapshot.key == receiptID){
                                var accountKey //= // get accountID
                                var query //= // query accounts table
                                return query.once('value').then(data => {
                                    var accountDetail = data.val();
                                    var age = accountDetail.age;
                                    var gender = accountDetail.gender;
                                    console.log(age + ' ' + gender);
                                    return({age, gender});
                                });
                            }
                        }).filter(result => !!result);
                    }).filter(result => !!result)));
                }); 
            }
        });
    })).then([].concat(...results => results.filter(result => !!result))); 
});

To explain questions in the comments

[].concat used to add the content of multiple arrays to a new array, i.e

[].concat([1,2,3],[4,5,6]) => [1,2,3,4,5,6]

...snapshotToArray(data).map(etc

... is the spread operator, used as an argument to a function, it takes the iterable and "spreads" it to multiple arguments

console.log(...[1,2,3]) == console.log(1,2,3)

In this case snapshotToArray(data).map returns an array of arrays, to give a console log example

console.log(...[[1,2],[3,4]]) == console.log([1,2], [3,4])

adding the concat

[].concat(...[[1,2],[3,4]]) == [].concat([1,2],[3,4]) == [1,2,3,4]

so it flattens a two level array to a single level, i.e.

console.log(...[[1,2],[3,4]]) == console.log(1,2,3,4)

So in summary, what that code fragment does is flatten a two level array

filter(result => !!result)

simply "filters" out any array elements that are "falsey". As you have this condition

if(childSnapshot.key == receiptID){

if that is false, the result will be undefined for that map - all other results will be an array, and even empty arrays are truthy - that's why the filtering is done so often! There's probably a better way to do all that, but unless you're dealing with literally millions of items, there's no real issue with filtering empty results like this

End result is a flat array with only the Promises returned from the code within