从Firebase获取10条心率数据仅显示最后一条，JS新手求助

嘿，别着急！你遇到的是新手常踩的小坑——每次更新数据时都直接覆盖了容器里的内容，所以最后只留下了最新的那条。咱们一步步来搞定它：

第一步：调整HTML结构 #

原来的<p>标签只能承载单段内容，换成列表容器更适合展示多条数据。修改你的test.html：

<body>
  <div>
    <!-- 用ul作为列表容器，方便添加多条心率记录 -->
    <ul id="heartbeat-list"></ul>
  </div>
</body>

第二步：修改JavaScript的渲染逻辑 #

核心是不要直接覆盖容器内容，而是循环每条数据并追加到容器中。假设你已经从Firebase拿到了包含10条数据的数组（比如叫pulseData），修改你的heartbeat_previous_data函数：

(function () { 
  console.log("inside unknown"); 
  heartbeat_previous_data(); 
})();

function heartbeat_previous_data() {
  // 这里是你从Firebase获取数据的逻辑，比如：
  // const pulseData = await firestore.collection('heartbeats').limit(10).get();
  // 假设最终拿到的是一个包含数值的数组，比如示例中的模拟数据
  const pulseData = [78, 82, 79, 81, 77, 83, 80, 76, 84, 79];

  // 获取列表容器DOM元素
  const listContainer = document.getElementById('heartbeat-list');
  
  // 可选：清空容器，避免重复加载数据时内容堆积
  listContainer.innerHTML = '';
  
  // 循环每条心率数据，创建元素并添加到容器
  pulseData.forEach((pulse, index) => {
    const listItem = document.createElement('li');
    listItem.textContent = `第${index+1}条：${pulse} bpm`;
    listContainer.appendChild(listItem);
  });
}

为什么之前只显示一条？ #

你之前大概率是类似这样写的（错误示例）：

// 每次赋值都会完全替换容器里的旧内容
document.getElementById('hearbeat_prev').innerHTML = `心率：${pulse}`;

这种写法会把之前的内容全部覆盖，循环结束后自然只留下最后一条数据。而现在用appendChild的方式，是把新内容追加到容器末尾，就能完整展示全部10条记录啦！

如果你的Firebase数据是实时监听更新的，记得每次获取新数据时先清空容器再重新渲染，避免数据重复堆积~

内容的提问来源于stack exchange，提问作者Lets Explorer