0

I am running into a bit of an issue with getting some data from a Firebase database and returning it on a page.

Here is the data retrieval function:

let appData = function() {

    let read = async function (dataset) {
            let dataReference;
            dataReference = firebase.database().ref(dataset + '/');

            let itemDataArray = [];

            dataReference.orderByChild('created').limitToLast(100).on('value', function (response) {
                response.forEach(function (element) {
                    let itemData = element.val();

                    if (dataset == 'blog') {
                        itemDataArray.push({
                            id: element.key,
                            author: itemData.author,
                            content: itemData.content,
                            created: itemData.created,
                            target: itemData.target || '_top',
                            title: itemData.title,
                            url: itemData.url
                        });
                    }
                    else if (dataset == 'pages')
                    {
                        itemDataArray.push({
                            id: element.key,
                            content: itemData.content,
                            created: itemData.created,
                            deprecated: itemData.deprecated || false,
                            menuText: itemData.menuText,
                            modified: itemData.modified,
                            parent: itemData.parent,
                            path: itemData.path || '/',
                            repo: itemData.repo,
                            sortOrder: itemData.sortOrder || 0,
                            target: itemData.target || '_top',
                            title: itemData.title,
                            tooltip: itemData.tooltip
                        });
                    }

                });
            });

            return await itemDataArray.reverse();
        }

    return {
        read: read
    }

}();

Here is my calling function (with comments on where it is failing):

function renderBlog() {
    appData.read('blog').then(function(result) {
        console.log(result); // This writes a value...
        let i = 0;
        $.each(result, function( key, value ){
            console.log(result[i].created); // Nothing ever happens here...
            i++;
        });
        document.getElementById('Content').innerHTML = 'Done...';
    });
}
eat-sleep-code
  • 4,753
  • 13
  • 52
  • 98
  • Your `read` function is not returning a meaningful Promise, it currently resolves synchronously. – CertainPerformance Jan 16 '19 at 04:57
  • Can you please elaborate? – eat-sleep-code Jan 16 '19 at 04:58
  • You need to wait for the `orderByChild...` to complete. – CertainPerformance Jan 16 '19 at 04:59
  • I have an await at the end of that function? Or maybe I am not understanding what you are referring to? – eat-sleep-code Jan 16 '19 at 05:04
  • `await` before a non-Promise does nothing; `itemDataArray.reverse();` resolves to a plain (empty) array, not a Promise – CertainPerformance Jan 16 '19 at 05:04
  • itemDataArray.reverse has data? The data is being returned from the data retrieval function to the calling function (otherwise the first console.log in the calling function wouldn't return a value, right?) – eat-sleep-code Jan 16 '19 at 05:08
  • No, it does not have data at the moment you `await` it - you've sent out the request that will (after some callbacks) eventually populate it, but it hasn't happened yet. The reason `console.log(result);` seems to contain data is that `console.log` is asynchronous too, it logs objects *as they are currently*, not as they were at the moment they were logged. Very confusing, I know. https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log – CertainPerformance Jan 16 '19 at 05:12
  • Well that makes debugging a pain. So, how do I await the orderByChild? I am a bit confused because pretty much anything I have tried this far has given me the same silly result? – eat-sleep-code Jan 16 '19 at 05:18
  • See https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises (or, if possible, use a native Promise method if it exists, not sure if Firebase has that). Then just `return` the Promise, and chain with `.then` (or use `await`) – CertainPerformance Jan 16 '19 at 05:20

0 Answers0