Array's elements' and length's values are undefined (when getting from Firebase)

Question

I am alright with getting an array from database however I cannot reach the elements of the array I got from database, neither arr[0] , arr[1] ... nor arr.length

That is why the conversion from array into object never occurs in toObject function below. ie The problem, arr.length and arr[i] are undefined.

Then, how can it be possible to successfully log console.log(arr) ? Yes, it displays arr successfully.

//Conversion function
const toObject = (arr) => {
    //If hardCodedArr attempted to convert, it is succesfully converted to object
    //let hardCodedArr= [
     // {"id":1, "isLocked": false, "name": "Cars"},
     // {"id":2, "isLocked": true, "name": "Planes"},
     // {"id":3, "isLocked": true, "name": "Trains"}
    //]
    
    //If array taken from Firebase, arr parameter, attempted to convert, it cannot reach to its sub-elements. i.e. arr[0], arr[1] ...
    // Therefore, conversion fails
    console.log("arr.length: ", arr.length)
    //arr.length: undefined  
    console.log("arr[0]: ", arr[0])
    //arr[0]: undefined  

    console.log("arr:", arr)
    //Displays the array!
    //arr: [
     // {"id":1, "isLocked": false, "name": "Cars"},
     // {"id":2, "isLocked": true, "name": "Planes"},
     // {"id":3, "isLocked": true, "name": "Trains"}
    //]

    //array to object conversion occurs here
    let rv = {}
    for (let i = 0; i < arr.length; ++i) {
            rv[i] = arr[i]
        }
    }
    console.log("rv:", rv)
    return rv
}

---

CategoriesScreen is the top level component where all these occur inside.

const CategoriesScreen = () => {
         ReadAndWrite(ReadFirebase, WriteFirebase)
         ...
         ...
}

---

    const ReadAndWrite = async (function1, function2) => {
        try {
            const categoriesList = await function1() //reading array from Firebase
            console.log(categoriesList)
            let obj = toObject(categoriesList) 
            function2(obj); //sending to Firebase in which I didn't include details here
        } catch (error) {
            throw error
        }
    }

console.log(categoriesList) .

---

const ReadFirebase= async () => {
    let topicsData;
    try {
        await database()
            .ref(`topics/`)
            .once('value')
            .then(snapshot => {
                topicsData = snapshot
            })
        return topicsData
    } catch (error) {
        throw error
    }
}

topics node from db.

Answer 1

Its because your arr type is DataSnapshop . DataSnapshop is not array type class you need to convert or foreach all items to new array.

const ReadFirebase= async () => {
let topicsData;
try {
    await database()
        .ref(`topics/`)
        .once('value')
        .then(snapshot => {
            topicsData = snapshot.val()
        })
    return topicsData
} catch (error) {
    throw error
}

or

const ReadFirebase= async () => {
let topicsData;
try {
    await database()
        .ref(`topics/`)
        .once('value')
        .then(snapshot => {
            snapshot.forEach(function(childSnapshot) {
            //add entity your topicdata
          });
        })
    return topicsData
} catch (error) {
    throw error
}

For more info https://firebase.google.com/docs/reference/js/v8/firebase.database.Reference#once https://firebase.google.com/docs/reference/js/v8/firebase.database.DataSnapshot