JavaScript：如何对从Firebase获取的数据进行排序并仅显示其中的一部分？

我尝试过创建一些功能，可以按最高分值从Firebase中对数据进行排序，并且只显示前5个。现在我可以轻松地在网上获取并显示所有数据，但这些数据对我而言并不是很有用。JavaScript：如何对从Firebase获取的数据进行排序并仅显示其中的一部分？

函数gotData给我适当的Firebase数据格式，并将每个得分放在列表中的li元素上。

console.log(JSON.stringify(scores)) print 

{"-KYxmoU7NnbTk0EpURZO":{"initials":"Rafi","score":8}, 
"-KYxnLZ0HyftwOENmTs1":{"initials":"Wichru","score":13}, 
"-KYxndQcCmiRDet-kLlK":{"initials":"Meg","score":36}, 
"-KYxpnFkihQhung3_1s_":{"initials":"asas","score":0}, 
"-KZ0I4eeAvReZdlw-9dL":{"initials":"Ryan","score":28}}

我也做：

var values = Object.values(scores); 
values.sort((a, b) => b.score - a.score);

如你所说

和对象由分数的值进行排序，但我仍然无法打印在网页视图

firebase.initializeApp(config); 
database = firebase.database(); 
var ref = database.ref('scores'); 
console.log(ref); 
ref.on('value', gotData, errData); 

function gotData(data) { 
    var scorelistings = document.querySelectorAll('.scorelisting'); 

    for (var i = 0; i < scorelistings.length; i++){ 
     scorelistings[i].remove(); 
    } 

    var scores = data.val(); 
    var keys = Object.keys(scores); 
    var olList = document.getElementById('list'); 

    for (var i = 0; i < keys.length; i++) { 
     var k = keys[i]; 
     var initials = scores[k].initials; 
     var score = scores[k].score; 

     var li = document.createElement('li'); 
     li.classList.add('scorelisting'); 


     $(olList).append(li); 
     var scoreArr = $('ol').find('li'); 
     var count = $("ol").find("li").length; 

     li.innerText = initials + ": " + score; 
    } 
} 

function errData(err) { 
    console.log('error'); 
} 

function submitScore(e) { 
    var data = { 
     initials: nickname.value, 
     score: score 
    } 
    e.preventDefault(); 
    // console.log(data); 
    ref.push(data); 
    scoreBoard.style.display = "none"; 
    highscoreBoard.style.display = "block"; 
}

来源

2016-12-14 greg

你试过limitToFirst（）吗？ https://firebase.google.com/docs/reference/js/firebase.database.Query#limitToFirst –

您可以对数据进行排序通过创建一个基于分数对象的新数组，其中包含分数内的对象。因此密钥被一个顺序（数组）索引替代（密钥被添加到每个对象的副本，所以你仍然有它）。然后对该数组进行排序很简单。你可以使用.every()停止迭代，一旦你有5个结果：

var scores = data.val(); 
Object.keys(data.val()) 
    .map (key => Object.assign({ key }, scores[key])) 
    .sort((a, b) => b.score - a.score) 
    .every((score, rank) => { 
     var li = document.createElement('li'); 
     li.classList.add('scorelisting'); 
     li.textContent = score.initials + ": " + score.score; 
     $(olList).append(li); 
     return rank < 4; 
    });

来源

2016-12-14 21:18:15 trincot

不幸的是，它无法正常工作。分数是包含具有数据的对象的对象 – greg

Massive！感谢您的快速回复！ – greg

JavaScript：如何对从Firebase获取的数据进行排序并仅显示其中的一部分？

回答

相关问题