Question 184658 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Cannot access array data in reactjs

When I’m trying to get data of getObjectives function, I have got undefined. I don’t know where is the problem, in the function or in the code

The function GetObjectives()

export async function GetObjectives(docId) {
  try {
    const querySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes"));
    const objectivesArray = [];

    querySnapshot.forEach(async (nodeDoc) => {
      const nodeId = nodeDoc.id;
      const objectivesQuerySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes", nodeId, "objectives"));

      const objectivesData = objectivesQuerySnapshot.docs.map((objectiveDoc) => ({
        ...objectiveDoc.data(),
        id: objectiveDoc.id
      }));
      objectivesArray.push(objectivesData);
    });

    return objectivesArray;
  } catch (error) {
    console.error('Error during the recuperation of objectives : ', error);
    return null;
  }
}

An example of the code when I get data

GetObjectives(sortDocuments[parseInt(selectedDocument)].id, result[0].id)
  .then(async (result) => {
    console.log(result)
    console.log(result[0])
});

Reponses :
console.log(result) return what I want, however console.log(result[0]) return undefined but I didn’t know why

//console.log(result)
[
    [        
        {
            "parents": [],
            "childrens": [],
            "content": "value",
            "id": "VULpo5mPCc2kckLC9BCy",
            "title": "value"
        }
    ],
    [
        {
            "parents": [],
            "childrens": [],
            "content": "value",
            "id": "VULpo5mPCc2kckLC9BCy",
            "title": "value"
        }
    ]
]

//console.log(result[0])
Undefined
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks it's work, the code

    export async function GetObjectives(docId) {
  try {
    const querySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes"));

    const objectivesArray = await Promise.all(querySnapshot.docs.map(async (nodeDoc) => {
      const nodeId = nodeDoc.id;
      const objectivesQuerySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes", nodeId, "objectives"));

      return objectivesQuerySnapshot.docs.map((objectiveDoc) => ({
        ...objectiveDoc.data(),
        id: objectiveDoc.id
      }));
    }));

    return objectivesArray;
  } catch (error) {
    console.error('Error during the recuperation of objectives: ', error);
    return null;
  }
}

  2. 0

    While I can’t explain the console output, I strongly believe that part of the issue is that GetObjectives() is actually returning an array of promises rather than array of resolved objects. You can use Promise.all() to resolve the array of promises "in parallel". Does the following implementation of GetObjectives() fix your issue?

    export async function GetObjectives(docId) {
  try {
    const querySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes"));

    const objectivesArray = querySnapshot.map(async (nodeDoc) => {
      const nodeId = nodeDoc.id;
      const objectivesQuerySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes", nodeId, "objectives"));

      return objectivesQuerySnapshot.docs.map((objectiveDoc) => ({
        ...objectiveDoc.data(),
        id: objectiveDoc.id
      }));
    });

    return Promise.all(objectivesArray);
  } catch (error) {
    console.error('Error during the recuperation of objectives : ', error);
    return null;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search