如何使用 Angular JS 排序和选择 json 数组中的前 5 个元素答案

【问题标题】：how to sort and select top 5 elements in a json array using angular JS如何使用 Angular JS 排序和选择 json 数组中的前 5 个元素
【发布时间】：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

标签： javascript jquery angularjs json highcharts

【解决方案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);

只需添加另一个地图或减少最终得到所需格式的结果。

【讨论】：