javascript - 如何使用 Angular JS 对 json 数组中的前 5 个元素进行排序和选择

标签 javascript jquery angularjs json highcharts

我有一个 REST API,它以 JSON 形式返回一个 Java.util.HashMap 对象。

它有表单中的数据(大约 15-20 个这样的元素):

"entity": {
    "element1": 15,
    "element2": 26,
    "element3": 37,
    "element4": 45
}

我正在调用 API 并在我的 Angular JS 应用程序中获取此 map ,如下所示:

url = 'http://localhost:8080/dummy/';
console.log(url);
$http.get(url).success(function(data) {
    var elements = [];
    var counts = [];
    var mymap = data.entity;
    console.log(mymap);
    Object.keys(mymap).forEach(function(key) {
        elements.push(key);
        counts.push(mymap[key]);
    });
})

接下来,我使用它在 UI 中使用 Highcharts 将其显示为条形图:

Highcharts.chart('hc-container', {
chart : {
    type : 'bar'
},
title : {
    text : 'Top 5 element count'
},
xAxis : {
    categories : elements
},
series : [ {
    name : 'count',
    data : counts
} ]
});

HTML:

<body ng-controller="myController">
  <div id="hc-container">Placeholder for chart</div>
</body>

现在它正在显示 map 中的所有元素。我只需要在条形图中显示计数最高的前 5 个元素。

我该怎么做?

最佳答案

您可以 sort()按其关联计数值和 slice() 的键结果:

let data = {
    "entity": {
      "element1": 1,
      "element2": 2,
      "element3": 3,
      "element4": 4,
      "element5": 5,
      "element6": 6,
      "element7": 7
    }
  },

  mymap = data.entity;


let elements = Object.keys(mymap)
  .sort((a, b) => mymap[b] - mymap[a])
  .slice(0, 5);

let counts = elements.map(key => mymap[key]);

console.log('5 highest counts', JSON.stringify(counts))
console.log('5 highest elements', JSON.stringify(elements))

关于javascript - 如何使用 Angular JS 对 json 数组中的前 5 个元素进行排序和选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45471216/

相关文章:

jquery - AngularJS : Directive : Animate sliding pages and postpone controller binding

javascript - 在隐藏元素中显示元素

javascript - 如何在代码运行时使 Jasmine 测试失败

javascript - jsPlumb - 连接覆盖标签

javascript - 用 Javascript 编写的可编辑表格

javascript - 在 if else 语句中切换类-React

javascript - 带有 Grails <content> 标签的 Angularjs

javascript - 这个正则表达式是什么意思:/[\[\.]/

php - 如何使用 ajax 调用打开 PDF

javascript - 加载模板之前完成http请求