使用JS通过map()渲染Firebase中对象的内容

46scxncf 于 2023-03-19 发布在其他

关注(0)|答案(2)|浏览(96)

我尝试使用onSnapshot在HTML中真实的呈现结果，如下所示：

const collectionRef = collection(db, 'notes');

onSnapshot(collectionRef, (snapshot) => {    
    let notes = []
    let html = '';

    const noteList = document.querySelector('.notes');

    snapshot.docs.map(function(doc) {
      notes.push({ ...doc.data(), id: doc.id })
      const li = `
        <li>
          <div class="note-title"> ${notes.title} </div>
          <div class="note-content"> ${notes.content} </div>
        </li>
      `;
      html += li
    })

    const noteList = document.querySelector('.notes');
    noteList.innerHTML = html;
})

但是我得到的只是HTML上打印了多个“undefined”。我尝试了JSON.parse或stringify，但没有效果。我必须做什么才能在页面中打印这个新填充的“notes”数组？
PS：如果我使用${notes[0].title}，我可以打印一些东西（例如第一个标题），但我坚持打印firebase中的所有值。

firebase

来源：https://stackoverflow.com/questions/75778740/render-the-content-of-an-object-from-firebase-with-map-using-js

2条答案

按热度按时间

7fhtutme1#

您正在从notes * 数组 * 中阅读title和content属性，而可以使用DocumentSnapshot#get：

const li = `
  <li>
    <div class="note-title"> ${doc.get("title")} </div>
    <div class="note-content"> ${doc.get("content")} </div>
  </li>
`;

(You也可以使用doc.data().title和doc.data().content）

赞(0）回复(0）举报 2023-03-19

os8fio9y2#

好吧，我把notes对象放在一个简单的for循环和BOOM中，它解决了这个问题（我现在觉得自己很笨，但我让它来帮助其他人）：）））

const collectionRef = collection(db, 'notes');

onSnapshot(collectionRef, (snapshot) => {       
    let notes = []
    let html = '';

    snapshot.docs.map(function(doc) {

      notes.push({ ...doc.data(), id: doc.id });

    });

    for(var i=0; i<notes.length; i++) {
      const li = `
        <li>
          <div class="note-title"> ${notes[i].title} </div>
          <div class="note-content"> ${notes[i].content} </div>
        </li>
      `;
      
      html += li;
    }

    console.log(notes, "NOTES");

    const noteList = document.querySelector('.notes');
    noteList.innerHTML = html;
})

赞(0）回复(0）举报 2023-03-19

我来回答

使用JS通过map()渲染Firebase中对象的内容

2条答案

相关问题

热门标签

最新问答