Javascript 如何从Firestore检索第一个和最后一个集合

我试图从Firebase检索数据并将其添加到div的innerHTML中，但我只获取最后一个集合（矩阵），但是，当我执行console.log时，我获取所有集合。有人能帮忙吗

script: 

const db = firebase.firestore();
const movies = db.collection("movies");

movies.add({
 title: "Jurassic Park",
 Director: "Steven Spielberg"

movies.add({
 title: "The Matrix",
 Director: "The W. brothers"

const container = document.getElementById("container");

movies.onSnashot( snap => {
 for(const movie of snap.docs) {
 const id = movie.id;
 const data = movie.data();

 Console.log(movie.title);
 container.innerHTML = movie.title + " is a great movie"

HTML: 

<div id="container"></div>

脚本：
const db=firebase.firestore（）；
const movies=db.collection（“电影”）；
电影。添加({
标题：“侏罗纪公园”，
导演：“史蒂文·斯皮尔伯格”
电影。添加({
标题：“矩阵”，
导演：“W兄弟”
const container=document.getElementById（“容器”）；
电影。onSnashot（快照=>{
for（snap.docs的const电影）{
const id=movie.id；
const data=movie.data（）；
Console.log（movie.title）；
container.innerHTML=movie.title+“是一部很棒的电影”
HTML:

您的代码只是在循环中每次都覆盖相同的容器innerHTML。听起来您希望它每次都会添加新的文本或元素

如果要添加新文本，请尝试将其追加到container.innerHTML，而不是每次都覆盖它：

container.innerHTML += movie.title + " is a great movie"

movies.onSnashot( snap => {
  container.innerHTML = ""
  for(const movie of snap.docs) {
    const id = movie.id;
    const data = movie.data();
    container.innerHTML += movie.title + " is a great movie"
  }
})

请注意

+=

而不是

=

。这可能也不会以您期望的方式呈现，但您至少应该看到所有电影标题都被挤在一个元素中

由于您使用的数据库侦听器每次在集合中发生变化时都会被调用，所以您也应该考虑擦除容器中的内容，而不是盲目地每次添加到它：

container.innerHTML += movie.title + " is a great movie"

movies.onSnashot( snap => {
  container.innerHTML = ""
  for(const movie of snap.docs) {
    const id = movie.id;
    const data = movie.data();
    container.innerHTML += movie.title + " is a great movie"
  }
})

---

您的代码只是在循环中每次都覆盖相同的容器innerHTML。听起来您希望它每次都会添加新的文本或元素

如果要添加新文本，请尝试将其追加到container.innerHTML，而不是每次都覆盖它：

container.innerHTML += movie.title + " is a great movie"

movies.onSnashot( snap => {
  container.innerHTML = ""
  for(const movie of snap.docs) {
    const id = movie.id;
    const data = movie.data();
    container.innerHTML += movie.title + " is a great movie"
  }
})

请注意

+=

而不是

=

。这可能也不会以您期望的方式呈现，但您至少应该看到所有电影标题都被挤在一个元素中

由于您使用的数据库侦听器每次在集合中发生变化时都会被调用，所以您也应该考虑擦除容器中的内容，而不是盲目地每次添加到它：

container.innerHTML += movie.title + " is a great movie"

movies.onSnashot( snap => {
  container.innerHTML = ""
  for(const movie of snap.docs) {
    const id = movie.id;
    const data = movie.data();
    container.innerHTML += movie.title + " is a great movie"
  }
})

---

我会使用

textContent

而不是

innerHTML

来减少发生XSS的机会。我会使用

textContent

而不是

innerHTML

来减少发生XSS的机会。