Firebase の Realtime Database を使用した際に orderByChild では昇順でしか並び替えることができず困ったため、見つけた解決方法を投稿しようと思います。まだまだ初心者のため表現方法等は誤っているかもしれませんが、下記コードは一度実行し動作確認しております。
使用環境
- AWS Cloud9
- Firebase Realtime Database
Realtime Database のデータ構造
コード
HTML
Firebase の設定等の部分は省略します
<button id="order">昇順</button>
<button id="reverse">降順</button>
<button id="reset">リセット</button>
<div id="list"></div>
JavaScript（データ出力部分）
const createDiv = function(firebaseData) {
// 取得データに下記処理を実行
firebaseData.on("child_added", function(snapshot) {
// "name","count"の値を代入
const getName = snapshot.child("name").val();
const getCount = snapshot.child("count").val();
// 新しい div 要素を作成
const newDiv = document.createElement("div");
// 新しい div の内容を作成
const divContent = document.createTextNode(getName + " : " + getCount);
// 上記で作成した内容を div 要素に追加
newDiv.appendChild(divContent);
// 内容を追加した div を list IDの中に追加
document.getElementById('list').appendChild(newDiv);
});
};
なお、HTMLのデータ出力に関してはこちらを参考にしております。
JavaScript（昇順）
document.getElementById("order").onclick = function() {
// Firebaseよりデータを取得
const firebaseData = firebase
.database()
.ref("list")
.orderByChild("count");
// 取得したデータを使い、出力する
createDiv(firebaseData);
};
普通に出力するとデータが
となりますが、こちらをアルファベット順にしようとする場合、count(Realtime Database の値) の値が降順になるようにしなければなりません。
そこで下記のように、
JavaScript（降順）
document.getElementById("reverse").onclick = function() {
// Firebaseよりデータを取得
const firebaseData = firebase
.database()
.ref("list")
// + 値の場合昇順になってしまうので、 - をつける
.orderByChild("-count");
// 取得したデータを使い、出力する
createDiv(firebaseData);
};
内容はほとんど変更がありませんが、一カ所Firebaseよりデータを取得する際に、 マイナス（-） を count(Realtime Database の値) に入れています。
これにより先ほどとはデータを取得する順序が変更され、
- name : AAA count : 3（-3）
- name : BBB count : 2（-2）
- name : CCC count : 1（-1） とcount(Realtime Database の値) が降順で出力されるようになりました。
JavaScript（全体）
/* jshint curly:true, debug:true */
const createDiv = function(firebaseData) {
// 取得データに下記処理を実行
firebaseData.on("child_added", function(snapshot) {
// "name","count"の値を代入
const getName = snapshot.child("name").val();
const getCount = snapshot.child("count").val();
// 新しい div 要素を作成
const newDiv = document.createElement("div");
// 新しい div の内容を作成
const divContent = document.createTextNode(getName + " : " + getCount);
// 上記で作成した内容を div 要素に追加
newDiv.appendChild(divContent);
// 内容を追加した div を list IDの中に追加
document.getElementById('list').appendChild(newDiv);
});
};
// 昇順
document.getElementById("order").onclick = function() {
// Firebaseよりデータを取得
const firebaseData = firebase
.database()
.ref("list")
.orderByChild("count");
// 取得したデータを使い、出力する
createDiv(firebaseData);
};
// 降順
document.getElementById("reverse").onclick = function() {
// Firebaseよりデータを取得
const firebaseData = firebase
.database()
.ref("list")
// + 値の場合昇順になってしまうので、 - をつける
.orderByChild("-count");
// 取得したデータを使い、出力する
createDiv(firebaseData);
};
// リセット
document.getElementById("reset").onclick = function() {
document.getElementById("list").innerHTML = "";
};
追記
こちら以外の解決方法やコードの書き方等ございましたら、勉強のために是非お教えいただければと思います。この投稿が、少しでも悩んでいる誰かの助けになれば幸いです。