如何通过JavaScript onclick函数读取并展示Firebase实时数据库内容

我来帮你实现这个功能！你已经搞定了数据推送的部分，接下来我们写一个绑定到点击事件的函数，用来读取Table - 1节点下的菜品数据，并把它们展示在页面上。

步骤1：准备页面元素 #

首先在HTML里添加一个触发按钮和用来展示数据的容器：

<!-- 触发读取操作的按钮 -->
<button onclick="fetchAndShowDishes()">读取并展示菜品</button>

<!-- 用来渲染菜品数据的容器 -->
<div id="dishesContainer"></div>

步骤2：编写读取并展示的JavaScript函数 #

这个函数会在点击按钮时触发，从Firebase拉取数据并渲染到页面上：

function fetchAndShowDishes() {
  // 获取Firebase数据库中Table - 1节点的引用
  const tableRef = firebase.database().ref('Table - 1');

  // 一次性读取节点下的所有数据（如果需要实时监听数据变化，可把once换成on）
  tableRef.once('value')
    .then((snapshot) => {
      const dishesContainer = document.getElementById('dishesContainer');
      // 先清空容器原有内容
      dishesContainer.innerHTML = '';

      if (snapshot.exists()) {
        // 遍历所有菜品数据
        snapshot.forEach((dishSnapshot) => {
          const dish = dishSnapshot.val();
          // 创建一个元素展示单条菜品信息
          const dishItem = document.createElement('div');
          dishItem.style.padding = '10px';
          dishItem.style.borderBottom = '1px solid #eee';
          dishItem.innerHTML = `
            <p><strong>菜品编码:</strong> ${dish.DishCode}</p>
            <p><strong>菜品名称:</strong> ${dish.DishName}</p>
          `;
          dishesContainer.appendChild(dishItem);
        });
        // 读取成功的提示
        Materialize.toast('菜品数据加载完成', 4000, 'rounded');
      } else {
        // 数据为空时的提示
        dishesContainer.innerHTML = '<p>当前没有菜品数据哦</p>';
        Materialize.toast('暂无菜品数据', 4000, 'rounded');
      }
    })
    .catch((error) => {
      // 捕获读取失败的错误
      console.error('读取数据出错:', error);
      Materialize.toast('数据读取失败，请检查配置', 4000, 'rounded');
    });
}

一些实用提示 #

• 确保你已经正确初始化了Firebase项目，页面开头需要包含Firebase的初始化配置代码（包含你的项目API密钥等信息），否则数据库操作会失败。
• 如果你需要实时监听数据变化（比如其他地方推送数据后页面自动更新），可以把once('value')换成on('value')，这样每次数据变动都会触发回调函数更新页面。
• 代码里用了Materialize的toast提示，和你推送数据时的交互保持了一致，提升体验统一性。

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