Javascript 如何使用angular JS对json数组中的前5个元素进行排序和选择_Javascript_Jquery_Angularjs_Json_Highcharts

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

javascript jquery angularjs json highcharts

Javascript 如何使用angular JS对json数组中的前5个元素进行排序和选择,javascript,jquery,angularjs,json,highcharts,Javascript,Jquery,Angularjs,Json,Highcharts,我有一个RESTAPI，它将Java.util.HashMap对象作为JSON返回它具有以下格式的数据（大约15-20个元素，如下所示）：我正在调用API并在Angular JS应用程序中获取此映射，如下所示： url = 'http://localhost:8080/dummy/'; console.log(url); $http.get(url).success(function(data) { var elements = []; var counts = [];

我有一个RESTAPI，它将Java.util.HashMap对象作为JSON返回

它具有以下格式的数据（大约15-20个元素，如下所示）：

我正在调用API并在Angular JS应用程序中获取此映射，如下所示：

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.chart('hc-container', {
chart : {
    type : 'bar'
},
title : {
    text : 'Top 5 element count'
},
xAxis : {
    categories : elements
},
series : [ {
    name : 'count',
    data : counts
} ]
});

HTML:


图表占位符

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

如何执行此操作？

您可以通过键的关联计数值和结果来选择键：

let数据={
“实体”：{
“元素1”：1，
“元素2”：2，
“元素3”：3，
“元素4”：4，
“元素5”：5，
“元素6”：6，
“元素7”：7
}
},
mymap=data.entity；
let elements=Object.keys（mymap）
.sort（（a，b）=>mymap[b]-mymap[a]）
.切片（0,5）；
让counts=elements.map（key=>mymap[key]）；
log（'5个最高计数'，JSON.stringify（计数））
console.log（'5个最高元素'，JSON.stringify（元素））

您可以使用angularJS$filter服务进行排序和排序：

（函数（）{
var app=angular.module（“soDemo”，[]）；
应用控制器（“soDemoController”，soDemoController）；
SoDemoController.$inject=['$scope'，'$filter']；
函数SoDemoController（$scope，$filter）{
var vm={
计数：[{
名称：'element1'，
计数：15
},
{
名称：'element2'，
计数：26
},
{
名称：'element3'，
计数：37
},
{
名称：'element4'，
计数：45
}
]
};
var limitToFilter=$filter（'limitTo'）；
vm.sortedCounts=limitToFilter（$filter（'orderBy'）（vm.counts，'-count'），3）；
$scope.vm=vm；
返回；
}
})();

计数
{{vm.counts | json}
分类计数（前3名）
{{vm.sortedCounts}json}
对象。为地图设置关键帧
只需添加另一个map或reduce，最终得到所需格式的结果。
您可以共享您的HTML吗？添加了HTML后，。排序（（a，b）=>mymap[a]-mymap[b]）do？还有，这种排序会基于地图中元素的计数吗？我的错误…修复了排序…是向后的。它根据关联的计数对密钥数组进行排序
Highcharts.chart('hc-container', {
chart : {
    type : 'bar'
},
title : {
    text : 'Top 5 element count'
},
xAxis : {
    categories : elements
},
series : [ {
    name : 'count',
    data : counts
} ]
});

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

const entity = {
  "element1": 99,
  "element2": 15,
  "element3": 26,
  "element4": 37,
  "element5": 45,
  "element6": 2
};

const result = Object.keys(entity).map(key => ({ key, value: entity[key] })).sort((elemA, elemB) => {
  if (elemA.value > elemB.value) {
    return -1;
  } else if (elemB.value > elemA.value) {
    return 1;
  }
  return 0;
}).slice(0, 5);
//
// [ { key: 'element1', value: 99 },
//   { key: 'element5', value: 45 },
//   { key: 'element4', value: 37 },
//   { key: 'element3', value: 26 },
//   { key: 'element2', value: 15 } ]
console.log(result);