项目不可迭代

Question

我尝试创建一个搜索功能和过滤功能widt javascript.. 我从 Firebase 获取数据。

也许我只是累了，但我无法到达“this.retter”，因为它不可迭代.. 任何人都可以帮忙 - 我如何参考这个数据列表？ :-)

//CLASS AND READ

    class MadService {
  constructor() {
    this.foodRef = firebaseDB.collection("madretter");
    this.userRef = firebaseDB.collection("users");
    this.authUser;
    this.authUserRef;
    this.retter;
    this.read();
  }

  read() {
    // SE DATABASEN OM DER ER ÆNDRINGER
    this.foodRef.onSnapshot(snapshotData => {
      let retter = [];
      snapshotData.forEach(doc => {
        let ret = doc.data();
        ret.id = doc.id;
        retter.push(ret);
      });
      this.appendFood(retter);
    });
  }



//SEARCH FUNCTiONALITY
      //SØGEFUNKITONEN
  search(value) {
    let searchQuery = value.toLowerCase();
    let searchFood = [];
    for (let ret of this.retter) {
      let overskrift = ret.name.toLowerCase();
      if (overskrift.includes(searchQuery)) {
        searchFood.push(ret);
      }
    }
    console.log(searchFood);
    this.appendFood(searchFood);
  }

谢谢！ :-)

Answer 1

this.retter 在您的代码中是 undefined。在尝试对其进行迭代之前，您需要在某个时刻将其初始化为 iterable。下面是一个将其初始化为数组的示例（注意构造函数中的this.retter = [];）。

我添加了addPhonyData 方法并注释掉了一些内容，因此代码可以作为示例：

//CLASS AND READ

class MadService {
  constructor() {
    this.foodRef; // = firebaseDB.collection("madretter");
    this.userRef; // = firebaseDB.collection("users");
    this.authUser;
    this.authUserRef;
    this.retter = [];
    //this.read();
    this.addPhonyData();
  }

  read() {
    // SE DATABASEN OM DER ER ÆNDRINGER
    this.foodRef.onSnapshot(snapshotData => {
      let retter = [];
      snapshotData.forEach(doc => {
        let ret = doc.data();
        ret.id = doc.id;
        retter.push(ret);
      });
      this.appendFood(retter);
    });
  }

  addPhonyData() {
    this.retter.push({
      name: 'DuMMy'
    });
  }

  search(value) {
    let searchQuery = value.toLowerCase();
    let searchFood = [];
    for (let ret of this.retter) {
      let overskrift = ret.name.toLowerCase();
      if (overskrift.includes(searchQuery)) {
        searchFood.push(ret);
      }
    }
    console.log(searchFood);
    //this.appendFood(searchFood); - not defined
  }
}

const ms = new MadService();

ms.search('dummy');