How to access individual object in array using Javascript-CodePudding

Hi I have exported using data (hawkers collection) using getDocs() from Firebase.

After that I put each hawker data as an object in an array called allStall as shown in the screenshot of the console log below.

Question 1 - How do I access each individual object in my allStall array. I try to use .map() to access each of it, but i am getting nothing.

Do note that I already have data inside my allStall array, see screenshot above. [Update] map doesn't work in code below because field is stallname not stallName. However, it needs to be async await if using/call in/from other function.

Question 2 - Why is there [[Prototype]]: Array(0) in my allStall array

export /*Soln add async*/function getAllStall(){
  var allStall = [];
  try
  {
    /*Soln add await */getDocs(collection(db, "hawkers")).then((querySnapshot) =>
      {
        querySnapshot.forEach((doc) =>
          {
            var stall = doc.data();
            var name = stall.stallname;
            var category = stall.category;
            var description = stall.description;

            var stallData = {
              stallName:name,
              stallCategory:category,
              stallDescription:description
            };
            allStall.push(stallData);
});});

     console.log(allStall);

    //Unable to access individual object in Array of objects
    allStall.map(stall =>{console.log(stall.stallName);});}

  catch (e) {console.error("Error get all document: ", e);}

  return allStall;
}

In my main js file, i did the following:

useEffect(/*Soln add await*/() =>
    {
        getAllStall();
        /*Soln:replace the statement above with the code below
        const allStall = await getAllStall();
        allStall.map((stall)=>console.log(stall.stallname));
       */
    }
);

CodePudding user response：

You are getting nothing because allStall is empty since you are not waiting for the promise to be fullfilled

try this

export const getAllStall = () => getDocs(collection(db, "hawkers"))
       .then((querySnapshot) =>
           querySnapshot.map((doc) =>
              {
                const {stallName, category, description} =  doc.data();
            
            return  {
              stallName:name,
              stallCategory:category,
              stallDescription:description
            };
           
          });
      )

try to change use effect like this

useEffect(async () =>
    {
        const allStats = await getAllStall();
        console.log(allStats)
        allStats.forEach(console.log)
    }
);

CodePudding user response：

A very big thanks to R4ncid, you have been an inspiration! And thank you all who commented below!

I managed to get it done with async and await. Latest update, I figure out what's wrong with my previous code too. I commented the solution in my question, which is adding the async to the function and await to getDocs.

Also map doesn't work in code above because field is stallname not stallName. However, it needs to be async await if using in/calling from other function.

Helper function

export async function getAllStall(){

  const querySnapshot = await getDocs(collection(db, "hawkers"));

  var allStall = [];

  querySnapshot.forEach(doc =>
    {
      var stall = doc.data();
      var name = stall.stallname;
      var category = stall.category;
      var description = stall.description;

      var stallData = {
        stallName:name,
        stallCategory:category,
        stallDescription:description
      };

      allStall.push(stall);
   }
  );

  
  return allStall;
}

Main JS file

useEffect(async () =>
        {
            const allStall = await getAllStall();
            allStall.map((stall)=>console.log(stall.stallname));
        }
    );

Hurray