J'essaie de récupérer des données de Firebase et de les ajouter dans le fichier innerHTML d'un div, mais je n'obtiens que la dernière collection (The Matrix). Cependant, lorsque je fais console.log, j'obtiens toutes les collections. Quelqu'un peut-il aider?

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>
0
Drax 11 févr. 2020 à 23:27

1 réponse

Meilleure réponse

Votre code écrase simplement le même conteneur innerHTML à chaque fois dans la boucle. Il semble que vous vous attendiez à ce qu'il ajoute à chaque fois un nouveau texte ou de nouveaux éléments.

Si vous souhaitez ajouter un nouveau texte, essayez de l'ajouter à container.innerHTML au lieu de l'écraser à chaque fois :

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

Notez += au lieu de =. Cela ne va probablement pas non plus rendre le rendu comme vous l'espériez, mais vous devriez au moins voir tous les titres de films coincés ensemble dans un seul élément.

Étant donné que vous utilisez un écouteur de base de données qui sera appelé à chaque fois que quelque chose dans la collection change, vous devriez également envisager d'effacer ce qu'il y a dans ce conteneur au lieu de l'ajouter aveuglément à chaque fois :

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"
  }
})
2
Doug Stevenson 11 févr. 2020 à 20:41