项目不可迭代

Question

我尝试创建搜索功能和过滤功能的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');