How would I get the data I need from this array?

Question

I am trying to get all the data from my firebase firestore and put it into a javascript react table but I am having a difficult time.

async function GetAllDataOnce() {
  const querySnapshot = await getDocs(collection(db, "repos"));
  var data = [];
  querySnapshot.forEach(doc => {
    data.push({
      id: doc.id,
      data: doc.data()
    })
  })
  return data;
}
var returndata = GetAllDataOnce();

This code gets all the data in a promise. It then returns the promise with all this data, which is good so far. Image of promise return

But once I try and put it into a table and render it with react, it doesn't like it saying that map can't be used on anything but an array, which this data is already.

export function ListData() {
    return (
      <table>
        {returndata.map(returndata => (
          <tr key={returndata.id}>
            <td>{returndata.data}</td>
          </tr>
        ))}
      </table>
    )
  }

Okay so that didn't work, so I try and just get a specific part of the array using

{returndata.data.map...

and it returns undefined. I have been searching all over for this and I have no idea. Any help would be appreciated.

EDIT 1 (Im guessing ill need a lot of these): Okay so now I have a little bit of success, after modifying some code I have come to this (which still doesn't fix anything):

export const ListData = () =>{ 
  const [dataList,setDataList] = useState([]);
    useEffect(() =>{
        async function callData(){
           const result = await GetAllDataOnce()
           return result
        }
       setDataList(callData())
     },[])
    async function GetAllDataOnce() {
       const querySnapshot = await getDocs(collection(db, "repos"));
       var data = [];
       querySnapshot.forEach(doc => {
          data.push({
            id: doc.id,
            data: doc.data()
          })
       })
      return data;
    }
  
   return (
        <table>
          {dataList.map(returndata => (
            <tr key={returndata.id}>
              <td>{returndata.data}</td>
            </tr>
          ))}
        </table>
  )}

Now I get an error:

Uncaught TypeError: dataList.map is not a function

Any help would be great!

Since the data is loaded from an asynchronous API, you need to store it in the state of your component. Also see: https://stackoverflow.com/questions/67511389/react-native-call-function-in-text-element/67511632#67511632 (and the other answers linked from there). — Frank van Puffelen, Apr 19 '22 at 03:50

mahdi ashori · Accepted Answer · 2022-04-20T05:55:23.733

1

const myComponnetName = () =>{ 
const [dataList,setDataList] = useState([]);


  useEffect(() =>{
      async function callData(){
         const result = await querySnapshot()
         return result
      }
     setDataList(callData())
   },[])


  async function GetAllDataOnce() {
     const querySnapshot = await getDocs(collection(db, "repos"));
     var data = [];
     querySnapshot.forEach(doc => {
        data.push({
          id: doc.id,
          data: doc.data()
        })
     })
    return data;
  }

 return (
      <table>
        {dataList.map(returndata => (
          <tr key={returndata.id}>
            <td>{returndata.data}</td>
          </tr>
        ))}
      </table>
)




}

edited Apr 20 '22 at 05:55

answered Apr 19 '22 at 06:58

mahdi ashori

515
4
13

Im getting `querySnapshot is not defined` as an error, why is that? Also, `GetAllDataOnce()` is never called. I also got all these [errors](https://i.imgur.com/K5v7GMh.png) – Apr 20 '22 at 03:57
add a try catch scope into GetAllDataOnce and log error in the catch scope then you can understand what happening – mahdi ashori Apr 20 '22 at 04:28
remove async keyword from useEffect and it's should work :) – mahdi ashori Apr 20 '22 at 05:55
I still cant figure it out, querySnapshot is still undefined… – Apr 20 '22 at 15:52
Okay I have a new error after modifying the code, "Uncaught TypeError: dataList.map is not a function", how would I fix that with my code? – Apr 28 '22 at 00:06
just make sure the data that's you set in setDataList(callData()) is a array this error will say to you maybe you set wrong data in you state and it's not array – mahdi ashori Apr 29 '22 at 07:42
can you look at my code? I did set it as an array @mahdi ashori – Apr 29 '22 at 22:02
can you log result and show me please ? – mahdi ashori Apr 30 '22 at 15:09

How would I get the data I need from this array?

1 Answers1