Node.js - 在網頁即時瀏覽 Firebase 的資料

前面的練習都是在編輯器開發或是在開發人員工具將資料寫入資料庫，在切換視窗到 Firebase 去查看資料是否有正確寫入，但這樣來回總是有點麻煩，而這篇要介紹在編輯器開發完就可以即時在瀏覽器看到寫入結果。

使用 pre 標籤在網頁做預覽

首先在 index.html 寫上下方標籤：

index.html

1	<pre id="preview"></pre>

並且透過 firebase.js 檔案先看看是否會透過 textContent 正確顯示內容，

1 2	let preview = document.querySelector("#preview"); preview.textContent = "這是預覽的值";

此時應該會在瀏覽器看到被輸出的值，

寫入資料到 Firebase

使用 set() 把資料寫入資料庫，

const myData = firebase.database().ref("myData");
let data = {
  store1: "American restaurant",
  store2: "Korean restaurant",
  store3: "Japanese restaurant",
  store4: "Taiwanese restaurant",
};
myData.set(data);

然後再用 on() 隨時監聽資料狀態，把資料賦值到剛剛的變數上，並且使用 JSON.stringify() 把資料轉成字串。

1
2
3

myData.on("value", function (snapshot) {
  preview.textContent = JSON.stringify(snapshot.val());
});

此時應該會在瀏覽器上看到這樣的內容。

但這樣似乎不好閱讀。

加上縮排讓資料好閱讀

而 JSON.stringify 可以除了可以帶入 value 外，也可以帶入替換的資料以及縮排間距。

MDN 範例：

1
2
3

JSON.stringify(value);
JSON.stringify(value, replacer);
JSON.stringify(value, replacer, space);

參數說明：

value：要轉換為 JSON 格式的值
replacer：可以是函式或是陣列，若沒有要帶值就寫 null。
space：要縮排的空間，可輸入 1-10，小於 1 代表不應該使用空格，大於 10 的會被呼略直接使用 10。

詳細說明請見參考資料連結。

此練習因為 replacer 參數沒有要帶陣列或字串，所以給 null，space 參數給 3。

1
2
3

myData.on("value", function (snapshot) {
  preview.textContent = JSON.stringify(snapshot.val(), null, 3);
});

網頁畫面就會呈現如下：

比直接整串字串好多了吧！也因為有使用 on 的關係，如果新增或修改資料，也會同步顯示於網頁上，這樣開發的時候就可以不用特別開 Firebase 的頁面來看，方便許多呢！

Demo:

## 參考資料

JSON.stringify()