使用Firebase创建排行榜

Question

我正在尝试使用Firebase Realtime DB构建前十名的排行榜-我能够按得分顺序排在前十名（由于Firebase的存储方式是升序，所以前十名），但是当我尝试将其放置在页面中时它们都按关键顺序显示。

如果我是一个博彩人，我猜这与for循环有关，我必须创建元素-但我对Javascript的了解不够，无法确定问题所在，而我在MDN上花费了最后3个小时和W3Schools，我无法终生解决。

还是我需要在实际数据查询上运行一个For Each循环？ 但是我感觉自己可以避免这种情况，因为我已经在收集分数数据，所以我可以以某种方式安排它？

我有点希望所有内容都按升序显示-这意味着我必须回过头来添加我的JQuery，但相反，我设法自己为自己创建了一个新问题。

任何建议将不胜感激

这是我当前的代码：

var db = firebase.database()
    var ref = db.ref('images')
    ref.orderByChild('score').limitToLast(10).on('value', gotData, errData);

    function gotData(data) {
        var scores = data.val();
        var keys = Object.keys(scores);
        var currentRow;
        for (var i = 0; i < keys.length; i++){
            var currentObject = scores[keys[i]];
            if(i % 1 == 0 ){
                currentRow = document.createElement("div");
                $(currentRow).addClass("pure-u-1-5")
                $("#content").append(currentRow);
            }
            var col = document.createElement("div")
            $(col).addClass("col-lg-5");
            var image = document.createElement("img")
            image.src=currentObject.url;
            $(image).addClass("contentImage")
            var p = document.createElement("P")
            $(p).html(currentObject.score)
            $(p).addClass("contentScore");
            $(col).append(image);
            $(col).append(p);
            $(currentRow).append(col);
        }
    }

Answer 1

预先使用.sort() ，然后遍历每个得分对象将其添加到页面：

function gotData(data) {
  const scores = data.val();
  const keys = Object.keys(scores);
  const sortedKeys = keys.sort((keyA, keyB) => scores[keyB].score - scores[keyA].score);
  const content = document.querySelector('#content');
  sortedKeys.map(sortedKey => scores[sortedKey])
  .forEach(scoreObj => {
    const row = content.appendChild(document.createElement('div'));
    row.classList.add('pure-u-1-5'); // better done in the CSS if possible
    const col = row.appendChild(document.createElement('div'));
    col.classList.add('col-lg-5');
    const img = col.appendChild(document.createElement('img'));
    img.src = scoreObj.url;
    img.classList.add('contentScore');
    col.appendChild(document.createElement('p')).textContent = scoreObj.score;
  });
}

For循环的抽象性较差，需要手动迭代，并且在使用var时存在提升问题-可以的话，请改用数组方法。