Firestore 如何避免显示重复的字段值（JavaScript）答案

【问题标题】：Firestore how to avoid displaying repeated field values (JavaScript)Firestore 如何避免显示重复的字段值（JavaScript）
【发布时间】：2021-01-11 19:59:16
【问题描述】：

我正在查询具有相同字段值的多个文档。我不想输出相同的字段两次。

db.collection("books")
  .where("ItemType", "==", "Book")
  .orderBy("Author")
  .limit(100)
  .get()
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      let data = doc.data();
      let row = `<tr>
                    <td>${data.Author}</td> 
                 </tr>`;
      let table = document.getElementById("myTable");
      table.innerHTML += row;
    });
  })
  .catch((err) => {
    console.log(`Error: ${err}`);
  });

输出：

正如您所看到的输出，这些字段正在重复。我不希望这种情况发生。如何编写代码，使字段值只出现一次，如果有重复的字段值，则不应显示。

【问题讨论】：

您需要独特的数据
stackoverflow.com/a/14438954/13647574

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

据我所知，firebase 没有“独特”的方法。（这将使您的请求更容易）。

因此，您必须创建一个数组并将循环中的值推送给它。并且在添加它的row之前，您应该检查当前值是否已经存在于数组中，如果不存在 - 添加它，否则 - 跳过。

let authors = [];
db.collection("books")
  .where("ItemType", "==", "Book")
  .orderBy("Author")
  .limit(100)
  .get()
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      let data = doc.data();
      if (!authors.includes(data.Author)) {
        authors.push(data.Author);
        let row = `<tr><td>${data.Author}</td> </tr>`;
        let table = document.getElementById("myTable");
        table.innerHTML += row;
      }
    });
  })
  .catch((err) => {
    console.log(`Error: ${err}`);
  });

进一步的建议： 由于表格是相同的元素，您可以在循环之前定义一次。并且可以直接放html而不是定义另一个变量（行）。

【讨论】：

您好，感谢您的帮助。我收到此错误：错误：TypeError：authors.include 不是函数
错字，试试：包括*
这是一个错字：authors.include 将是 authors.includes

【解决方案2】：

解决方案

let querySnapshot = [
  {
    Author: "A",
  },
  {
    Author: "B",
  },
  {
    Author: "C",
  },
  {
    Author: "D",
  },
  {
    Author: "A",
  },
  {
    Author: "B",
  },
  {
    Author: "C",
  },
  {
    Author: "A",
  },
];

let table = document.getElementById('myTable')
let allAuthers = querySnapshot
  .map(doc => doc.Author)
  .filter((value, index, self) => self.indexOf(value) === index);

allAuthers.forEach((auther) => {
  table.innerHTML += `<tr><td>${auther}</td></tr>`;
});

&lt;table id="myTable"&gt;&lt;/table&gt;

【讨论】：