JSON对象数组不为空，但无法使用foreach进行迭代，显示零长度 [英] Array of JSON object is not empty but cannot iterate with foreach, show zero length

问题描述

我从Firestore的 create()中阅读了有关书 checkout 的收藏.

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

数据存储在 data()中声明的 checkout 数组中.

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
      }
      ......

当我运行 console.log(this.checkout); 时，控制台将显示以下内容:

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

但是，我无法对其进行迭代，控制台显示 this.checkout.length 为 0

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

我也尝试使用Object.keys，但是没有运气.

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.

推荐答案

数据是从Firestore(以及大多数现代Web API)异步加载的.这意味着开始查询后，其余代码将继续执行，然后当数据从数据库返回时，将调用 then()回调.反过来，这意味着所有需要访问数据库数据的代码都必须位于 then()回调内部.

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

  }
  ......

另请参阅:

• 如何获取数据从onSnapshot外部的firestore数据库中

为什么Firebase API是异步的吗?

这篇关于JSON对象数组不为空，但无法使用foreach进行迭代，显示零长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！