按钮单击时对Firebase数据进行排序

Question

Currently within my application, I am displaying a list of books from my Firebase database:

I would like to have an on click event which when the AZ icon (shown in the image) is clicked, the list is sorted in Alphabetical order.

The code snippets show what I have so far:

 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> 

I know I should be using orderByChild - I'm just not sure how to implement. I tweaked the 'child_added' function to orderByChild which does sort the list, but prints it below the original sorted list:

Please could anyone advise what the most efficient way of sorting the list is onClick. At some point as well I want to be able to sort the list in reverse order - ZA - So any help on that would be great as well.

Here is the screen shot of the firebase JSON file:

Many thanks, G

Answer 1

The problem is with this part of your code:

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

You are creating a new li again below the unsorted one. Clear the parent list and then append.

ulList.innerHTML = '';

Add this inside your sortEventListener function. It should work.