Question

我试图使用Firebase实时数据库构建前10名排行榜 - 我能够按分数排序前10名（由于firebase按升序排列的方式排在前10位）然而当我尝试将它们放在按键顺序显示的页面中。

如果我是一个博彩人，我猜它是关于for循环我必须创建元素 - 但我在Javascript上做得不够好找出问题所在我是否已经在MDN和W3School上度过了最后3个小时，而且我不能为我的生活做好准备。

要么我还是需要在实际数据查询中运行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;
  });
}

对于循环具有更糟的抽象，需要手动迭代，并且在使用var时存在悬挂问题 - 请尽可能使用数组方法。

使用Firebase创建排行榜

1 个答案: