获取 JSON 数组中的前 5 个得分值答案

【问题标题】：Get the top 5 score values in JSON array获取 JSON 数组中的前 5 个得分值
【发布时间】：2016-05-03 00:45:25
【问题描述】：

所以我试图在这个 JSON 对象中获取前五个分数值。

http://rest.learncode.academy/api/guessinggame/scores

现在我正在获取所有值。

数组中的对象有一个 score 属性。我正在尝试获取具有最高分值的前 5 个对象并将它们吐出在有序列表中。

提前感谢您的帮助！

$.ajax({
    type: 'GET',
    url: 'http://rest.learncode.academy/api/guessinggame/scores',
    success: function(data) {
      console.log("Scores!", data); //the new item is returned with an ID

      $.each(data, function(i, score) {
        $('.score-list').append('<li> Name: ' + score.name + '<br/>' + 'Score: ' + score.score);
      })
    }
  });

【问题讨论】：

标签： javascript jquery json ajax loops

【解决方案1】：

好的，因此您需要使用以下方法将 JSON 转换为对象数组：

var arr = JSON.parse(data);

然后你可以使用下面的排序函数进行排序，它会从低到高排序。

arr.sort(function(a, b) {
   return a.score - b.score;
});

如果你想从高到低排序，你可以在排序函数中交换 a 和 b。例如：

x.sort(function(a, b) {
return b.score - a.score;
});

然后，如果你愿意，你可以转换回 JSON：

JSON.stringify(arr);

【讨论】：

太棒了！这创造了奇迹！通过代码及其功能欣赏人为的解释。
别担心！玩转该功能，您可以尝试按不同的变体进行排序。您甚至可以使用以下函数过滤掉某些结果：例如，您可以使用过滤器函数过滤掉 != 0 的分数：arr.filter( function (obj) {return obj.score != 0}); @GarrettSanderson
太棒了！我一定会搞砸的！

【解决方案2】：

这是基于 JavaScript 中的 Array.sort()，它使用比较函数对数据进行排序（但比较函数使用 unicode 值，这就是我使用 parseInt() 的原因）

    data.sort(function(a, b){
        if (parseInt(a.score) < parseInt(b.score)) {
            return 1;
        }
        if (parseInt(a.score) > parseInt(b.score)) {
            return -1;
        }
        return 0;
    })

然后你可以使用 Array.slice() 来获取前 n 个元素

【讨论】：

【解决方案3】：

通过使用：

data = data.sort(function(a, b) {
    return parseInt(b.score, 10) - parseInt(a.score, 10);
});

您可以在数组中使用给定的分数值对数据进行排序。您可以使用<ol> 标签来呈现有序列表。

类似这样的：

$(function() {
  $.ajax({
    type: 'GET',
    url: 'http://rest.learncode.academy/api/guessinggame/scores',
    success: function(data) {
      data = data.sort(function(a, b) {
        return parseInt(b.score, 10) - parseInt(a.score, 10);
      });
      $.each(data, function(i, score) {
        if (i < 5) { // The top 5.
          $('.score-list').append('<li> Name: ' + score.name + '<br/>' + 'Score: ' + score.score);
        }

      })
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol class="score-list"></ol>

【讨论】：