<ul id="list"></p>
//#region firebase core
const firebaseConfig = {
  apiKey: "AIzaSyDhtziAvRJxhkVpSR8Lfb6JqZ1GE-jBfuY",
  authDomain: "nodejsproject-d099d.firebaseapp.com",
  projectId: "nodejsproject-d099d",
  storageBucket: "nodejsproject-d099d.appspot.com",
  messagingSenderId: "620886577949",
  appId: "1:620886577949:web:bb7819e6cb71ffb05307f4",
  measurementId: "G-CKJW9DEX9H",
};

firebase.initializeApp(firebaseConfig);
//#endregion

//* data
let name = document.querySelector("#name");
let str = document.querySelector("#str");
const data = {
  tim: {
    hight: "175",
    age: "38",
    weight: "77",
    job: "dad",
  },
  min: {
    hight: "155",
    age: "39",
    weight: "55",
    job: "mom",
  },
  joshua: {
    hight: "100",
    age: "3",
    weight: "13",
    job: "boy",
  },
  carol: {
    hight: "80",
    age: "1",
    weight: "10",
    job: "girl",
  },
};

const ref = firebase.database().ref("home");
ref.set(data); //*寫入資料
ref.orderByChild("age").once("value", function (snapshot) {
  let str = "";
  snapshot.forEach((item) => {
    let data = item.val();
    str += `<li>${data.age}</li>`;
  });
  list.innerHTML = str;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js
  2. https://www.gstatic.com/firebasejs/8.9.1/firebase-database.js