如何在简易HTML页面中展示Firebase多行数据？

嘿，我来帮你搞定在空白页面展示Firebase多行数据的问题！你已经能成功显示单个字符串了，只需要稍微调整下数据读取和页面渲染的逻辑就可以实现多行展示，我分两种常见的Firebase数据结构来给你详细说明：

情况1：Firebase中存储的是数组格式的多行数据 #

如果你的Firebase数据结构是数组形式（比如把每一行内容存在一个数组里），比如：

{
  "textLines": [
    "第一行测试内容",
    "第二行测试内容",
    "第三行测试内容"
  ]
}

那可以用下面的代码来渲染：

<!DOCTYPE html>
<html>
<head>
  <title>展示Firebase多行数据</title>
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
  <style>
    #contentContainer {
      max-width: 800px;
      margin: 20px auto;
      padding: 0 20px;
    }
    .line-item {
      margin: 8px 0;
      padding: 8px;
      background: #f0f0f0;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div id="contentContainer"></div>

  <script>
    // 替换成你的Firebase配置
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      databaseURL: "YOUR_DATABASE_URL",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);

    // 获取页面容器
    const container = document.getElementById('contentContainer');
    // 指向Firebase的数组节点
    const dbRef = firebase.database().ref().child('textLines');

    // 监听数据变化
    dbRef.on('value', snap => {
      // 先清空容器，避免重复渲染
      container.innerHTML = '';
      // 获取数组数据
      const lines = snap.val();
      // 遍历每一行，创建元素添加到页面
      lines.forEach(line => {
        const lineElement = document.createElement('div');
        lineElement.className = 'line-item';
        lineElement.innerText = line;
        container.appendChild(lineElement);
      });
    });
  </script>
</body>
</html>

情况2：Firebase中存储的是独立子节点（更推荐） #

Firebase对纯数组的处理有时候会有小坑（比如实时更新时的索引问题），更推荐用带独立key的子节点来存储多行数据，结构如下：

{
  "textLines": {
    "line_001": "今天天气不错",
    "line_002": "适合出门散步",
    "line_003": "顺便买杯奶茶"
  }
}

对应的渲染代码只需要调整遍历逻辑：

// 监听数据变化部分替换成这个
dbRef.on('value', snap => {
  container.innerHTML = '';
  // 遍历所有子节点，不管key是什么都能拿到内容
  snap.forEach(childSnap => {
    const lineContent = childSnap.val();
    const lineElement = document.createElement('div');
    lineElement.className = 'line-item';
    lineElement.innerText = lineContent;
    container.appendChild(lineElement);
  });
});

额外小技巧：保留文本中的换行符 #

如果你的Firebase数据里的字符串本身包含\n换行符，想要在页面上显示换行效果，可以给.line-item加个CSS样式：

.line-item {
  white-space: pre-line;
}

这样文本里的\n会自动转换成页面上的换行。

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