Get values of array of objects

Question

For some reason I am having the hardest time get to values of an object stored within an array. Here is how I am populating my array:

var arrActivities = []; 

//other not needed variables here.. 

function logIt(){
firebase.firestore().collection('PostedFunActivities').where("geolocation", ">=", range.lower).where("geolocation", "<=", range.upper).get().then((querySnapshot) =>{
    querySnapshot.forEach((doc) =>{ 
            arrActivities.push(doc.data());                                         
    })
});
       console.log(arrActivities);
       console.log(arrActivities.length);
}

The result of my console.log is the following:

[]
    0: {location: "Mānana Ridge Trail, Pearl City, HI, USA", geolocation: "87z9yj0x5"}
    1: {timePosted: "13:50:05 GMT-1000 (HST)", geolocation: "87zc52x78"}
    2: {userId: "QevGxIV57lZuC92oTjp80N9WcIy2", title: "Koko crater arch"}
    3: {timePosted: "13:46:55 GMT-1000 (HST)", image: "0.1565895502212029"}
    4: {title: "Bike", datePosted: "Fri Jun 12 2020"}
length: 5
__proto__: Array(0)

I feel like i tried a million way to get either the length of the array or the values within, but I cannot get to any of that. Some of my attempts involve suggestions coming from these SO posts (these attempts are to get the lenght):
data.length
Object.keys(data).length

I would really appreciate any suggestions on how to get the length and values of my objects.

*My Objective
I need to get the length of the array which in this case would be 5. Also I need to be able to get into my values for example the the userId within the 3rd element in the array.

Answer 1

It seems your code is asynchronous:

function logIt(){
    firebase.firestore().collection('PostedFunActivities').where("geolocation", ">=", range.lower).where("geolocation", "<=", range.upper).get().then((querySnapshot) =>{
        querySnapshot.forEach((doc) =>{ 
                arrActivities.push(doc.data());                                         
        })
   });
   
   console.log(arrActivities);
   console.log(arrActivities.length);
}

The .then means that your anonymous arrow function callback will only populate the arrActivities array when the .get() promise resolves.

The reason the console.log was showing a filled array with length but the arrActivites.length wasn't is because of this. Namely, console.log shows the array as it is ("live"), whereas .length accesses the length property of the array when the statement is executed.

Essentially console.loging a variable may asynchronously show that variable as a live reference, so by the time you see the logged output it may be changed from when it was first logged. On the other hand, accessing the length property of the array is guaranteed to be synchronous, meaning that when you log the length of the array, the value logged is unchanging.

One solution for this would be to wrap your logIt function body in a Promise, and then simply wait for the returned arrActivities:

function logIt(){
    return new Promise((resolve, reject) => {
        firebase.firestore().collection('PostedFunActivities').where("geolocation", ">=", range.lower).where("geolocation", "<=", range.upper).get().then((querySnapshot) => {
            querySnapshot.forEach((doc) =>{ 
                arrActivities.push(doc.data());                                         
            })
            resolve(arrActivities);
        });
    });
}


logIt().then((result) => {
    console.log(result.length);
});

Answer 2

To get the length of each item in the array:

for (const item of arrActivities) {
    console.log(Object.keys(item).length);
}

To store the lengths of the items in the array in another array:

let arrLength = [];
for (const item of arrActivities) {
    arrLength.push(Object.keys(item).length);
}

To get the length of the array:

console.log(arrActivities.length);

To get the number of items in all objects of the array, i.e. the total number of object values of the items in the array:

let total = 0;
for (const item of arrActivities) {
    total += Object.keys(item).length;
}
console.log(total);