如何为Firebase数据库子节点批量生成<option>标签？

我看你在遍历Firebase节点生成下拉选项时，遇到了要么重复输出所有用户、要么只显示最后一个用户的问题，这就来帮你理清楚问题出在哪，以及怎么正确实现：

问题根源拆解 #

1. 第一种嵌套循环写法：你在snapshot.forEach内部又套了一层for循环，每次遍历到一个用户节点，都会重复循环childlength次生成相同的选项，自然会把所有用户重复输出多遍。
2. 第二种外部循环写法：把for循环放在forEach外面时，self.voornamen和self.lidnummers已经被最后一个遍历到的用户数据覆盖了，所以循环生成的都是最后一个用户的选项。

正确实现思路 #

其实完全不需要额外的for循环，直接在遍历每个子节点的过程中生成对应的<option>，并把它们追加到变量里（用+=而不是=，避免覆盖之前的内容），这样每个用户只会被生成一次选项，最终就能得到完整的选项列表。

修正后的代码 #

const gebruikersref = firebase.database().ref('Gebruikers/');
self = this;
gebruikersref.once('value', function(snapshot) {
  var email = self.email;
  self.voornaam = '';
  self.achternaam = '';
  self.lidnummer = '';
  // 初始化选项字符串为空，后续用+=追加新选项
  self.medespelers = '';

  snapshot.forEach(function(childSnapshot) {
    const data = childSnapshot.exportVal();
    // 生成当前用户的option标签，追加到medespelers中
    self.medespelers += "<option value='speler" + childSnapshot.key + "'>" + data.Voornaam + " - " + data.Lidnummer + " </option>";

    // 匹配当前登录用户的信息
    if (data.Email === email) {
      self.voornaam = data.Voornaam;
      self.achternaam = data.Achternaam;
      self.lidnummer = data.Lidnummer;
    }
  });

  // 遍历完成后，把生成的选项插入到对应的select元素中
  // 示例：document.getElementById('your-select-id').innerHTML = self.medespelers;
  console.log(self.medespelers);
});

额外小优化 #

我把选项的value从speler"+i+"改成了childSnapshot.key，这样选项的value会对应Firebase节点的唯一键，比用索引更可靠，后续如果需要根据value获取用户数据也更方便。

内容的提问来源于stack exchange，提问作者user10004588