如何使用 Angular JS 排序和选择 json 数组中的前 5 个元素
Posted
技术标签:
【中文标题】如何使用 Angular JS 排序和选择 json 数组中的前 5 个元素【英文标题】：how to sort and select top 5 elements in a json array using angular JS 【发布时间】：2018-01-10 07:00:09 【问题描述】：我有一个 REST API，它以 JSON 形式返回 Java.util.HashMap 对象。
它有表单中的数据（大约 15-20 个这样的元素）：
"entity":
"element1": 15,
"element2": 26,
"element3": 37,
"element4": 45
我正在调用 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：
<body ng-controller="myController">
<div id="hc-container">Placeholder for chart</div>
</body>
现在它正在显示地图中的所有元素。我只需要在条形图中显示计数最高的前 5 个元素。
我该怎么做？
【问题讨论】：
你能分享你的 HTML 吗？ 也添加了 HTML 【参考方案1】：您可以通过关联的计数值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))【讨论】：
.sort((a, b) => mymap[a] - mymap[b]) 是做什么的？另外，这种排序会基于地图中存在的元素数量吗？
我的错误...固定排序..倒退了。它按关联的计数对键数组进行排序【参考方案2】：
您可以使用 angularJS $filter 服务进行排序和 top n:
(function()
var app = angular.module("soDemo", []);
app.controller("soDemoController", SoDemoController);
SoDemoController.$inject = ['$scope', '$filter'];
function SoDemoController($scope, $filter)
var vm =
counts: [
name: 'element1',
count: 15
,
name: 'element2',
count: 26
,
name: 'element3',
count: 37
,
name: 'element4',
count: 45
]
;
var limitToFilter = $filter('limitTo');
vm.sortedCounts = limitToFilter($filter('orderBy')(vm.counts, '-count'), 3);
$scope.vm = vm;
return;
)();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="sample" ng-app="soDemo" ng-controller="soDemoController">
<h2>Counts</h2>
<pre>vm.counts | json</pre>
<h2>Sorted Counts (top 3)</h2>
<pre>vm.sortedCounts | json</pre>
</div>【讨论】：
【参考方案3】：Object.keys 一张地图。
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);
只需添加另一个地图或减少最终得到所需格式的结果。
【讨论】：
以上是关于如何使用 Angular JS 排序和选择 json 数组中的前 5 个元素的主要内容，如果未能解决你的问题，请参考以下文章