How to access individual object in array using Javascript

Question

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));
       */
    }
);

Does this answer your first question? Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference — evolutionxbox
– evolutionxbox, Commented Apr 25, 2022 at 7:20
[[prototype]] is the accessor property which gets the array's prototype object. stackoverflow.com/questions/7929159/… may help — evolutionxbox
– evolutionxbox, Commented Apr 25, 2022 at 7:26
Which issue are you talking about? Your first question is pretty much answered by the question I linked. The second is nothing to worry about, and you can read more about object prototypes here — evolutionxbox
– evolutionxbox, Commented Apr 25, 2022 at 7:36
Do note that I am using promise/then syntax, so it is unlikely to be async promise and then is async... — Liam
– Liam, Commented Apr 25, 2022 at 8:26

Liam · Accepted Answer · 2022-04-25 08:27:28Z

2

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)
    }
);

edited Apr 25, 2022 at 8:27

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Apr 25, 2022 at 7:57

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

R4ncid Over a year ago

@Liam You're right in principle but in this is case I used this mixed approach to avoid to change the code too much.

R4ncid Over a year ago

@lonelearner that console.log that you are referring to is the one in the code or one that you log by your own in the browser?

Liam Over a year ago

@lonelearner it is an async issue.

R4ncid Over a year ago

@lonelearner try my latest edit and see if it works

R4ncid Over a year ago

@lonelearner it's a const holding an arrow function. I changed it so in this way so I can avoid to use return and curly braces. It return a Promise of an array of object since it is an async request

|

lonelearner · Accepted Answer · 2022-04-25 11:18:08Z

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

Collectives™ on Stack Overflow

How to access individual object in array using Javascript

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related