【Firebase資料庫(2) 】數據排序orderByChild、數據過濾equalTo、筆數限制limitToFirst、倒序

＊學習教材：六角學院/ NodeJS 前後端開發實戰（講解非常清楚＆可以問到飽，大推！）

基本順序

路徑>>數據排序orderByChild(“屬性”)>>數據過濾（startAt等）>>數據數量限制（limitToFirst等）>>連線>>forEach

​

資料的順序排序

基本概述

• 路徑>> orderByChild(“屬性”)>>連線>>forEach
• 範例（試圖將資料以體重進行排序）

 var people = {
        Paul: {
            weight: 100,
            height: 100,
            age: 20
        },
        neo: {
            weight: 40,
            height: 120,
            age: 28
        },
        Json: {
            weight: 34,
            height: 98,
            age: 18
        }
    }

//寫入people資料
firebase.database().ref("people").set(people);
    var path = firebase.database().ref("people")

path.orderByChild("height").once("value", function (snapshot) {

        console.log(snapshot.val())
        //單純這樣的資料不是有順序的


        snapshot.forEach(function (item) {
        // 要加上for each才能按照順序把資料撈出來

            console.log(item.val())   //輸出所有資料
            console.log(item.val().age) //只輸出年齡
        })

    })

​

OrderbyChild的排序規則

firebase文件

順序如下

• 空值
• false
• true
• 數字由小到大
• 字串由a到z
• 對象

​

舉例來說：

假設以height作為排序標準，那console.log的結果就會是
沒有設定的height的-> height 值為false的-> height值為true的->數字-> height為字串的-> height值為物件的

數據過濾

• startAt()
• endAt()
• equalTo()

//過濾出2000~3000的數據
//路徑>>排序>>過濾>>監聽
peopleRef.orderByChild("weight").startAt(2000).endAt(3000).once("value", function (snapshot) {
   //略
      })

​

//利用equalTo找會員mail
peopleRef.orderByChild("mail").equalTo("123@gmail.com").once(略)

​

資料數量限制

• limitToFirst（筆數）
• limitToLast（筆數）

//取符合weight=2500
peopleRef.orderByChild("weight").equalTo(2500).limitToLast(2).once(略)

​

倒序排序——reverse

• 最新的資料往上面排

建立陣列⇒把資料用for each推進陣列=>反轉陣列=>把陣列用for in放入字串

  path.on("value", function (snapshot) {
      var str = ""
      var data = []

      snapshot.forEach(function (item) {
        // console.log(item.val())
        data.push(item.val());
      })
      data.reverse()   

      for (item in data) {
        str += "<li data-key='" + item + "'>" + data[item] + "</li>"
      }
      list.innerHTML = str;
    })

​