从 firebase 数据库中获取最高分值

Question

在我的网站上有一些我从 firebase 获得的电影。电影的分数在0到100之间。我已经在我的网站上找到了所有的电影。我还想按降序显示它们。（例如评分最高的 5 部电影）我怎样才能做到这一点？感谢您的回答。

           const app = initializeApp(firebaseConfig);
           const db = getDatabase(app);
           const auth = getAuth(app);
           const firebaseRef= ref(getDatabase());
    
    
      var body = document.getElementById('movies');
      var body2 = document.getElementById('series');
    
    
    function AddItemsToTable(name, score, img, id) {
        var movies = `<div class="content"><a href="movieDetail.html?movieId=${id}"><img src="${img}" ></a><p><a href="movieDetail.html?movieId=${id}">${name}</a></p> <p> <i class="fa fa-star checked" id="star${id}"></i>&nbsp;<a class="scoretxt">${score}%</a> </p> </div>`;
        body.innerHTML+=movies;
    
    }
    function AddItemsToTable2(name, score, img, id) {
        var series = `<div class="content"><a href="seriesDetail.html?seriesId=${id}"><img src="${img}" ></a><p><a href="seriesDetail.html?seriesId=${id}">${name}</a></p> <p> <i class="fa fa-star checked" id="star2${id}"></i>&nbsp;<a class="scoretxt">${score}%</a> </p> </div>`;
        body2.innerHTML += series;
    
    }
    
    
    //*******************************I got the movies************************************************
            function AddAllItemsToTable(TheMovies){
              var counter=0;
                TheMovies.forEach(element => {
                  if (counter===6) {
                    return;
                  }
                    AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
                 
                    counter++;
            });
          }
          //************************I got tv series*********************************************
          function AddAllItemsToTable2(TheSeries){
              var counter=0;
    
          TheSeries.forEach(element => {
            if (counter===6) {
              return;
            }
              AddItemsToTable2(element.seriesName, element.seriesScore, element.seriesImage, element.seriesId);
              counter++;
    
      });
    
        }
        function AddAllItemsToTable3(TheMovies){
          var counter=0;
            TheMovies.forEach(element => {
              if (counter===6) {
                return;
              }
                AddItemsToTable3(element.movieName, element.movieScore, element.movieImage, element.movieId);
               
                counter++;
        });
    
      }
    
            function getAllDataOnce(){
                const dbRef=ref(db);
                get(child(dbRef,"Movies"))
                        .then((snapshot)=>{
                            var movies=[];
                    snapshot.forEach(childSnapshot => {
                        movies.push(childSnapshot.val())
                    });
                    AddAllItemsToTable(movies);
                });
            }
            function getAllDataOnce2(){
                const dbRef=ref(db);
                get(child(dbRef,"Series"))
                        .then((snapshot)=>{
                            var series=[];
                    snapshot.forEach(childSnapshot => {
                        series.push(childSnapshot.val())
                    });
                    AddAllItemsToTable2(series);
    
                });
            }
    
    
                window.onload = (event) => {
                    getAllDataOnce();
                    getAllDataOnce2();
    };

      <div class="grid-container">

          <header class="header">

              <div class="solheader">
                <a href="main.html" style="logo" class="big"> <img src="img/sonlogo3.png" alt="logo"></a>
                <a href="main.html" style="logo"  class="small"> <img src="img/logosmall.png" alt="logo" style="width:60px;height:48px;margin:5px;"></a>


              </div>
              <div class="ortaheader">
            <input type="text" placeholder="Movies or TV series.." class="searchbox"><i class="fa fa-search arama"></i>  </input>
                <ul>
                <li class="categories"><a href="#">Categories&nbsp;&nbsp;<i class="fa fa-caret-down" style="font-size:16px;"> </i></a>
                 <ul class="dropdown">
                      <li><a href="series.html">TV Series</a></li>
                      <li><a href="movies.html">Movies</a></li>
                    </ul>
                </li>
                  </ul>
              </div>

              <div class="menu sagheader">

                <ul>
                  <li>
                  <button class="ikon dropdown-toggle" type="button" data-toggle="dropdown"><i class="far fa-user"></i>  </button>
                  <ul class="dropdown-menu">
                   <li class="accountname"><b><script>document.write(document.cookie.substring(5))</script></b></li>
                   <li class="login"><a href="login.html" style="color:red;"><i class="fa fa-sign-in-alt" style="color:red;"></i>&nbsp;&nbsp;&nbsp;Login</a> </li>
                   <li class="signup"><a href="signup.html" style="color:red;"><i class="fa fa-user-plus" style="color:red;"></i>&nbsp;&nbsp;Sign up</a> </li>
                   <li class="logout"><a onclick="deletecookie()" style="cursor:pointer;"><i class="fas fa-door-open" style="color:red;"></i>&nbsp;&nbsp;Log out</a></li>
                </ul>
                  </li>
                </ul>
              </div>
          </header>

          <div class="body" id="body">

              <div class="baslik">Movies</div>
              <div class="baslik2"><a href="movies.html">See all</a></div>
              <div id="movies">
              </div>

                <div class="baslik">Series</div>
                <div class="baslik2"><a href="series.html">See all</a></div>
              <div id="series">
              </div>

              <div class="baslik">Top Rated Movies</div>
              <div class="baslik2"><a href="#">See all</a></div>
              <div id="toprated">
              </div>



</div>
          <div class="footer">
              <div class="">
                  <img src="img/sonlogo3.png" alt="logo">
                  <ul>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Terms and Policies</a></li>

                  </ul><br><br>
                  <ul>
                    <li>© 2021 Cinemeter</li>
                    <li class="destroy">|</li>

                    <li>All rights reserved.</li>
                  </ul>
              </div>


          </div>
        </div>

Firebase 数据库

这是我的网站

Answer 1

虽然 Firebase 可以对结果进行排序，但结果始终是升序排列的。如果您想按降序显示它们，则必须在您的应用程序代码中反转它们。

像这样：

const query = query(child(dbRef,"Movies"), orderByChild("movieScore"));
get(query).then((snapshot)=>{
    var movies=[];
    snapshot.forEach(childSnapshot => {
        movies.push(childSnapshot.val())
    });
    movies.reverse
});

如果你想获得最高分，你也可以在查询中使用limitToLast：

const query = query(child(dbRef,"Movies"), orderByChild("movieScore"), limitToLast(5));

另请参阅 ordering and filtering data and limiting the number of results 上的 Firebase 文档。

关于您的数据结构的几点说明：

为您的节点使用顺序数字键是 Firebase 中的一种反模式，通常 use push keys. Also see Best Practices: Arrays in Firebase。
您将分数存储为字符串，这必然会导致问题，因为字符串是按字典顺序排序的。我建议转换您的数据以将分数存储为数字（因此没有 " 引号）。

从 firebase 数据库中获取最高分值

Getting highest score values from firebase database

html

javascript

firebase

firebase-realtime-database