ボタンをFirebaseデータをソートすると、現在の私のアプリケーション内

Question

をクリックして、私は私のFirebaseデータベースから本のリストを表示しています：

私はときAZアイコン（クリックでイベントがしたいです画像に表示されている）をクリックすると、リストはアルファベット順にソートされます。

コードスニペットは、私がこれまで持っているものを示しています。

var myFirebase = new Firebase('https://project04-167712.firebaseio.com/object/Book/'); 
 

 
const ulList = document.getElementById('list'); 
 
const dbRefObject = firebase.database().ref().child('object'); 
 
const dbRefList = dbRefObject.child('Book'); 
 

 
var sort = document.querySelector('#sort'); 
 

 
sort.addEventListener("click", function() { 
 
    //Where I want the sort event to go 
 
    //So far I have this: 
 
    dbRefList.orderByChild('book').on('child_added', snap => { 
 
     const li = document.createElement('li'); 
 
     li.innerText = snap.val().book; 
 
     li.id = snap.key; 
 
     ulList.appendChild(li); 
 

 
    }); 
 
    //This is taken directly from the child added but changed to orderByChild. 
 
    //It sorts the list but of course just re prints it below the unsorted list. 
 
}); 
 

 
dbRefList.on('child_added', snap => { 
 
     const li = document.createElement('li'); 
 
     li.innerText = snap.val().book; 
 
     li.id = snap.key; 
 
     ulList.appendChild(li); 
 

 
    }); 
 

 
    dbRefList.on('child_changed', snap => { 
 
     const liChanged = document.getElementById(snap.key); 
 
     liChanged.innerText = snap.val().book; 
 

 
    }); 
 

 
    dbRefList.on('child_removed', snap => { 
 
     const liToRemove = document.getElementById(snap.key); 
 
     liToRemove.remove(); 
 
     
 
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<div id="sortContainer"> 
 
      <i id="sort" class="material-icons">sort_by_alpha</i> 
 
     </div>

私はorderByChild使用する必要があります知っている - 私はちょうど実装するかどうかはわかりません。誰もがリストをソートする最も効率的な方法は、onClickのが何であるかを助言することができます

：私は、ソートリストを行いorderByChildに「child_added」関数を微調整しますが、オリジナルのソートされたリストの下に表示します。ある時点でも、逆順でリストを並べ替えることができるようにしたいと考えています - Z-A - その上の助けも素晴らしいでしょう。ここで

はfirebase JSONファイルのスクリーンショットです：

多くのおかげで、 G

Answer 1

問題はあなたのコードのこの部分である：

dbRefList.orderByChild('book').on('child_added', snap => { 
    const li = document.createElement('li'); 
    li.innerText = snap.val().book; 
    li.id = snap.key; 
    ulList.appendChild(li); 
}); 

あなたが作成しています新しいのは未分類のものよりも下にあります。 リストをクリアしてから追加します。

ulList.innerHTML = ''; 

これをsortEventListener関数内に追加します。それは動作するはずです。