使用orderByChild和equalTo在Firebase查询上返回单个孩子的值

Question

I am trying to pull a URL for an image in storage that is currently logged in the firebase real time database.

This is for a game of snap - there will be two cards on the screen (left image and right image) and when the two matches the user will click snap.

All of my image urls are stored in the following way:

Each one has a unique child called "index" - I also have another tree that is just a running count of each image record. So currently I am running a function that checks the total of the current count, then performs a random function to generate a random number, then performs a database query on the images tree using orderByChild and an equalTo that contains the random index number.

If I log the datasnap of this I can see a full node for one record (So index, score, url, user and their values) however if I try to just pull the URL I get returned a value of Null. I can, rather annoyingly, return the term "URL" seemingly at my leisure but I can't get the underlying value. I've wondered if this is due to it being a string and not a numeric but I can't find anything to suggest that is a problem.

Please bare in mind I've only been learning Javascript for about a week at max, so if I'm making obvious rookie errors that's probably why!

Below is a code snippet to show you what I mean:

    var indRef = firebase.database().ref('index')
    var imgRef = firebase.database().ref('images')
    var leftImg = document.getElementById('leftImg')
    var rightImg = document.getElementById('rightImg')

    document.addEventListener('DOMContentLoaded', function(){

    indRef.once('value')
    .then(function(snapShot){

        var indMax = snapShot.val()
        return indMax;
    })
    .then(function(indMax){


        var leftInd = Math.floor(Math.random()* indMax + 1)
        imgRef.orderByChild('index').equalTo(leftInd).once('value', function(imageSnap){
            var image = imageSnap.child('url').val();
            leftImg.src=image; 
            })
        })
    })

Answer 1

When you execute a query against the Firebase Database, there will potentially be multiple results. So the snapshot contains a list of those results. Even if there is only a single result, the snapshot will contain a list of one result.

Your code needs to cater for that list, by looping over Snapshot.forEach() :

   imgRef.orderByChild('index').equalTo(leftInd).once('value', function(imageSnap){
       imageSnap.forEach(function(child) {
         var image = child.child('url').val();
         leftImg.src=image; 
       })
    })