Unable to retrieve data from Cloud Firestore using queries

Question

I am attempting to retrieve a collection of data from my Cloud Firestore, so that I can arrange the data in a "Bootstrap" Table, displaying the name and the score from the Firestore documents.FireStore Layout Here.

I have created a reference to the user collection and queried this to obtain data, however when I run this it throws an exception "Uncaught ReferenceError: querySnapshot is not defined".

<script>
var usersCollectionRef = db.collection("users"); //Creates a reference to the Users collection
var query = usersCollectionRef.orderBy("score", "desc").limit(10); //Creates a query based on the collection
query.get().then(function(querySnapshot) { //If query is needed
            if (querySnapshot.empty) { //Check whether there are any documents in the result
                console.log('no documents found');
            } else {
                    querySnapshot.docs.map(function (documentSnapshot) {
                        var name =      documentSnapshot.data().name;
                        var score =         documentSnapshot.data().score;
                        console.log(name + score);          
                    });
            }
});
</script>

My aim is to retrieve all of the documents inside the user collection, order and sort them using the inbuilt .limit and orderBy methods, then store them in an array so that they can be displayed using a "Bootstrap" table. var query = usersCollectionRef.orderBy("score").limit(10); //Selects the 10 highest scoring player's documents

Renaud Tarnec Renaud Tarnec · Accepted Answer · 2018-05-03T11:45:27

Note for potential readers: the fist part of the answer corresponds to the initial question of the OP, before it was edited.

You have to put the second part of your code within the then() function, as below. This is because get() returns "a promise that will be resolved with the results of the query." (see the Ref https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference#get)

var usersCollectionRef = db.collection("users"); //Creates a reference to the Users collection

var query = usersCollectionRef.where("name", "==", "Steeve"); //Creates a query based on the collection

query.get().then(function(querySnapshot) { //Call get() to get a QuerySnapshot

            if (querySnapshot.empty) { //Check whether there are any documents in the result
                console.log('no documents found');
            } else {
                    querySnapshot.docs.map(function (documentSnapshot) {
                        //Not necessary to do that  -> return documentSnapshot.data();
                        console.log(documentSnapshot.data().name); 
                    });
            }

});

EDIT following your comment:

In case you would have several documents for a given name which hold a different score (in a number field score), you could get the total score like that:

var usersCollectionRef = db.collection("users"); //Creates a reference to the Users collection

var query = usersCollectionRef.where("name", "==", "Steeve"); //Creates a query based on the collection

query.get().then(function(querySnapshot) { //Call get() to get a QuerySnapshot

    var score = 0;

    if (querySnapshot.empty) { //Check whether there are any documents in the result
        console.log('no documents found');
    } else {
        var data = querySnapshot.docs.map(function (documentSnapshot) {
            //Not necessary to do that  -> return documentSnapshot.data();
            console.log(documentSnapshot.data().name);
            score += documentSnapshot.data().score;
        });
    }

    console.log(score);

});

EDIT after edit of the original post

Do like that

var query = usersCollectionRef.orderBy("score", "desc").limit(10); //Creates a query based on the collection
query.get().then(function(querySnapshot) { //If query is needed
            if (querySnapshot.empty) { //Check whether there are any documents in the result
                console.log('no documents found');
            } else {
                var nameArray =  Array.from(querySnapshot.docs, x => x.data().name);
                console.log(nameArray);

                var scoreArray =  Array.from(querySnapshot.docs, x => x.data().score);
                console.log(scoreArray);
            }
});

Explanations:

querySnapshot.docs returns "An array of all the documents in the QuerySnapshot." (See Ref: https://firebase.google.com/docs/reference/js/firebase.firestore.QuerySnapshot#docs)
Then you use Array.from() to create the two arrays (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

Unable to retrieve data from Cloud Firestore using queries

1 Answers