0

Given a collection called 'Colors' on firestore, I want to get the doc IDs of each document (entry) in the collection and add that to an array.

I've tried many things, but this what my current attempt.

  getVocab(){
    var vocab = [];
    this.db.collection("Colors").get().then((snapshot) => {
      snapshot.docs.forEach((doc) => {
          var str = "";
          var currentID = str.concat(doc.id);
          vocab.push(currentID);
      });
      for (let i = 0; i < 12; i++) {
        console.log (vocab[i]);
      }
      return vocab;
    });
  }

  ngOnInit() {
    var vocab = this.getVocab();
    for (let i = 0; i < 12; i++) {
      console.log (vocab[0]);
    }
  }

Whenever I console.log within the getVocab() function anywhere before that final });, it works i.e the array vocab contains the document-id of all the documents in my Colors collection.
However, I get the following error whenever I try to use the returned array in any other method at all.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined

Apparently, the array vocab is undefined when I return it, even though it isn't undefined right before I return it.

I'm sure this is some firebase rule that I don't understand :(

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
CodingMee
  • 65
  • 8
  • Data is loaded from Firebase asynchronously. By the time your `return vocab;` runs, the `getVocab` function itself has long finished. What you can do is return a promise, like the `then()` that Firestore itself returns. See https://stackoverflow.com/questions/61751725/how-to-avoid-async-functions-in-javascript/61753107#61753107 for an example. So in your case that'd mean `return this.db.collection("Colors").get().then((snapshot) => {...` and then `this.getVocab().then((vocab) => { for (let...` – Frank van Puffelen Apr 01 '21 at 03:46
  • @Frank van Puffelen I really wish you had waited and asked for my opinion before you closed my question because whaddaya know, that doesn't help at all. I am not trying to avoid async functions, and that's not even the language I'm using. – CodingMee Apr 01 '21 at 16:27
  • If I tagged with and linked the wrong question, then please fix the tag. The problem is the same though. Did you try the solution I gave in my comment? – Frank van Puffelen Apr 01 '21 at 16:30
  • I can't really try your solution because it isn't complete and as a complete beginner to Firebase, I have no idea what the "..." stands for. I also don't know how to change the tag, and even if I did, how would I know where to find the right answer to tag? I asked a new question because I couldn't find an already existing post that answered the question I had in mind. – CodingMee Apr 01 '21 at 16:33
  • The `...` in my comment is meant to be the rest of your code. The only thing you need to change is add a `return` at the start, so that the value you `return vocab;` is also returned (as a promise) our of `getVocab`. Here are some other questions about the same topic in the context of Firestore/JavaScript: https://stackoverflow.com/search?q=%5Bgoogle-cloud-firestore%5D%5Bjavascript%5D+return+variable+outside, and one for JavaScript but without being specific to Firestore: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Frank van Puffelen Apr 01 '21 at 17:46

0 Answers0