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

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. i.e. 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.

CodePudding user response：

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
}

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