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

Question

目前在我的应用程序中，我正在显示我的 Firebase 数据库中的书籍列表：

我想要一个点击事件，当点击 A-Z 图标（如图所示）时，列表按字母顺序排序。

代码 sn-ps 显示了我目前所拥有的：

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 - 我只是不确定如何实施。我将 'child_added' 函数调整为 orderByChild，它确实对列表进行了排序，但将其打印在原始排序列表的下方：

请任何人告知最有效的列表排序方式是 onClick。在某些时候，我也希望能够以相反的顺序对列表进行排序 - 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);
});

您正在未排序的下方再次创建一个新的 li。清除父列表，然后追加。

ulList.innerHTML = '';

将此添加到您的 sortEventListener 函数中。它应该可以工作。