Last night, I encountered an unusual issue while working with a basic JavaScript array. In my React Native app connected to Firebase's real-time database through the SDK, I came across something unexpected.
Here's the piece of code:
var app = this
this.props.fb.auth().onAuthStateChanged(function(user) {
if (user) {
app.props.fb.database().ref('/users/' + user.uid + "/timeline").once('value').then(function(snapshot) {
var posts = snapshot.val()
return posts
}).then((posts) => {
var statuses = [];
for (i in posts) {
app.props.fb.database().ref('/posts/' + posts[i]).once('value').then(function(snapshot) {
statuses.push(snapshot.val())
});
}
console.log(statuses)
})
}
});
The objective of the above code was to retrieve data from each user's timeline, loop through the posts on the timeline, and fetch post-specific data from posts. The extracted data was supposed to be added to the statuses array, which is then displayed using console.log at the end.
Upon checking the console, the following output appeared. https://i.sstatic.net/qWgh9.png
Strangely, until the array is expanded, its items are not visible in the console. Furthermore, when attempting to determine the length of the array, it returns 0, making it impossible to iterate over the elements within the array.
Could anyone point out what might be going wrong here?