Array of JSON object is not empty but cannot iterate with foreach, show zero length

Question

I read a collection about book checkout from firestore in create().

The data is store in checkout array that declared in data().

export default {
  name: "checkout-history",
  data() {
    return {
      checkout: []
      ]
    };
  },
  created() {
    db.collection("checkout")
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            const data = {
              id: doc.id, // firebase document id
              book_did: doc.data().book_did,
              borrowed_date: doc.data().borrowed_date,
              copies_did: doc.data().copies_did,
              due_date: doc.data().due_date
            };
            this.checkout.push(data); // push to array
          });
        });

      console.log(this.checkout)  // show data, as in the image below

      console.log(this.checkout.length)  // get 0
      console.log(Object.keys(this.checkout).length)  // get 0
      }
      ......

When I run console.log(this.checkout);, console show this:

However, I cannot iterate it, the console show this.checkout.length is 0

I also tried to use Object.keys but no luck.

Object.keys(this.checkout).forEach(key => {
     const keys = this.checkout[key];
     console.log(keys);
});

I really don't know what to do anymore.

I read many answers online and tried most of them, but none of them work.

Please update your question to show how `this.checkout` is initialized, and how the two snippets relate to each other. As Mamun answered, you're likely logging the length before the data has loaded, but it's impossible to say without seeing how the two snippets relate. — Frank van Puffelen, Jul 22 '19 at 14:12

score 2 · Answer 1 · answered Jul 22 '19 at 14:11

2

I guess you are executing your code before the completion of the request.

If you hover over the little blue i icon, it says:

Value below was evaluated just now.

answered Jul 22 '19 at 14:11

Mamun

66,969
9
47
59

Thank you for your time. – No One Jul 22 '19 at 14:51

score 1 · Accepted Answer · answered Jul 22 '19 at 14:47

Data is loaded from Firestore (and from most modern web APIs) asynchronously. This means that the rest of your code continues to execute after you start the query, and then when the data comes back from the database, your then() callback is called. This in turn means that all code that needs access to the data from the database, must be inside the then() callback.

db.collection("checkout")
    .get()
    .then(querySnapshot => {
      querySnapshot.forEach(doc => {
        const data = {
          id: doc.id, // firebase document id
          book_did: doc.data().book_did,
          borrowed_date: doc.data().borrowed_date,
          copies_did: doc.data().copies_did,
          due_date: doc.data().due_date
        };
        this.checkout.push(data); // push to array

        console.log(this.checkout)  // show data, as in the image below

        console.log(this.checkout.length)  // get 0
        console.log(Object.keys(this.checkout).length)  // get 0
      });
    });

  }
  ......

Also see:

I always forgot async and sync existed. Thank you for your time. — No One, Jul 22 '19 at 14:50

Array of JSON object is not empty but cannot iterate with foreach, show zero length

2 Answers2

Linked