Javascript array with data inside but ’empty header’ [duplicate]

I’m new to JS. I created the 1st array with loop and push, from cloud database. Then I manually declared the 2nd array with the same data. But in firefox console, when you console.log() them, it is like this:

As it shows, the 1st one has an ’empty header’ and length is empty too.

The difference I have found so far is that when you run:

console.log(JSON.stringify(array1));
console.log(JSON.stringify(array2));

The output is gonna be:

My question is: How to transform (or fix) the 1st array to make it exactly same as the 2nd array?

——————————–
Updated the code to fetch data from Firebase.

        // Function to fetch locations from Firebase
        const loclist = [];
        async function getLocs() {
            const dbRef = await db.ref('chatbot')

            await dbRef.once('value', (snapshot) => {
                snapshot.forEach((childSnapshot) => {
                    const childData = childSnapshot.val();
                    if (childData && childData.user_loc) { // Check if loc exists
                        loclist.push(childData.user_loc); // Add loc to the list
                    }
                });

                // Display in the HTML
                const userlocElement = document.getElementById("loclist_html");
                loclist.forEach(loc => {
                    const li = document.createElement("li");
                    li.textContent = loc; // Set loc as the text content of the list item
                    userlocElement.appendChild(li); // Append list item to the list
                });
            });
        };

        getLocs();