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

Question

目前，在我的应用程序中，我正在显示Firebase数据库中的图书清单：

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

代码段显示了我到目前为止所拥有的内容：

＆＃13;

＆＃13;

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();
      
    });

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

我知道我应该使用orderByChild - 我只是不确定如何实现。我调整了'child_added＆＃39;函数orderByChild对列表进行排序，但将其打印在原始排序列表下面：

请任何人都可以告知最有效的排序方法是onClick。在某些时候，我希望能够以相反的顺序对列表进行排序 - Z-A - 所以任何帮助都会很好。

以下是firebase JSON文件的屏幕截图：

非常感谢， ģ

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函数中添加它。它应该工作。