How to loop in object that returns empty but actually has an object in javascript-CodePudding

I'm hard stock with this problem, actually I got an objects from firebase and push them in an array, but when I loop this in foreach it gives me an empty result:

Console:

[]
0: {org_Address: 'Talisay City', middle_Name: 'Galve', rescuer_Num: 45344, last_Name: 'Primavera', first_Name: 'Jazon', …}
1: {coordinates: Kc, org_Address: 'Talisay City', rescuer_Num: 54552342, first_Name: 'Francisco', middle_Name: 'Palinguva', …}
2: {rescuer_Num: 533452, rescue_Org: 'Talisay City Disaster Risk Reduction and Management Office (TCDRRMO)', coordinates: Kc, date_Registered: at, first_Name: 'Berto', …}
3: {middle_Name: 'Arroyo', org_Address: 'Talisay City', rescuer_Num: 545234212, last_Name: 'Donasco', first_Name: 'Brent', …}
4: {coordinates: Kc, middle_Name: 'Delacruz', date_Registered: at, first_Name: 'John', rescuer_Num: 2342314, …}
5: {coordinates: Kc, first_Name: 'Kenneth John', middle_Name: 'N/A', rescuer_Num: 534534535, org_Address: 'Talisay City', …}
6: {last_name: 'adsf', rescue_Org: 'asdf', middle_name: 'adsf', first_name: 'asdf', org_Address: 'asdf', …}
7: {middle_Name: 'Philip', rescue_Org: 'Radiant Volunteer', first_Name: 'Ace', coordinates: Kc, rescuer_Num: 123124, …}
8: {last_name: 'aaa', rescuer_Num: 'aaa', org_Address: 'aaa', rescue_Org: 'aaa', middle_name: 'aaa', …}
9: {org_Address: 'Talisay City', coordinates: Kc, rescuer_Num: 4353453, rescue_Org: 'Talisay City Disaster Risk Reduction and Management Office (TCDRRMO)', last_Name: 'Cock', …}
length: 10
[[Prototype]]: Array(0)

This is my implementation:

// from other source file
export async function firebaseReadDoc(targetDocument) {
    let dataCollected = [];
    getDocs(collectionReference(targetDocument))
        .then(snapshot => {
            snapshot.docs.forEach(doc => {
                dataCollected.push({...doc.data(), id: doc.id });
            });
            console.log(SUCCESS_READ_FIREBASE);
        }).catch(e => {
            console.error(WARNING_FAIL_READ_FIREBASE);
            console.error(e.message);
        });
    return dataCollected
}
// from other source file
function readDocRescuer() {
    const targetDocument = "public_rescuers";
    const data = firebaseReadDoc(targetDocument);
    data.then(response => {
        console.log(response);
        response.forEach(doc => {
            console.log(doc.first_name);
        })
    })
}

then when I log doc.first_name it's not showing.

CodePudding user response：

firebaseReadDoc is an async function (returns a Promise), so you will have to do await firebaseReadDoc(targetDocument) in readDocRescuer. You will also need to make readDocRescuer an async function.

Alternatively you can do firebaseReadDoc(targetDocument).then(//read your data);

CodePudding user response：

As explained by Tu Nguyen, you need to manage the asynchronous aspect of the getDocs() method. The following should do the trick:

// from other source file
export async function firebaseReadDoc(targetDocument) {
    let dataCollected = [];
    const snapshot = getDocs(collectionReference(targetDocument));
    snapshot.docs.forEach(doc => {
        dataCollected.push({...doc.data(), id: doc.id });
    });
    return dataCollected
}

// from other source file
async function readDocRescuer() {    // async function
    const targetDocument = "public_rescuers";
    const dataArray = await firebaseReadDoc(targetDocument);
    dataArray.forEach(doc => {
        console.log(doc.first_name);
    })
}

Or with a non async function.

function readDocRescuer() {   // non async function
    const targetDocument = "public_rescuers";
    firebaseReadDoc(targetDocument)
    .then(dataArray => {
        console.log(dataArray);
        dataArray.forEach(doc => {
            console.log(doc.first_name);
        })
    })
}