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

问题描述

我在 create() 中从 firestore 中阅读了有关书籍 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屋！