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

Question

我试图从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>

Answer 1

您的代码只是每次通过循环覆盖相同的容器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"
  }
})