如何使用角度排序和選擇JSON數組中的前5個元素JS

我有一個REST API，它以JSON的形式返回一個Java.util.HashMap對象。如何使用角度排序和選擇JSON數組中的前5個元素JS

它在表格數據（一些15-20元這樣）：

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

我調用API並獲得該地圖在我的角度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個元素。

我該怎麼做？

來源

2017-08-02 sumit

你能分享你的HTML嗎？ –

添加了HTML以及 – sumit

您可以通過其關聯的計數值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))

來源

2017-08-02 21:27:44 charlietfl

'.sort（（a，b）=> mymap [a] - mymap [b]）'做了什麼？此外，這種排序是基於地圖中存在的元素的數量嗎？ – sumit

我的錯誤...固定排序..是倒退。它通過相關的計數 – charlietfl

排序鍵陣列謝謝，這工作！ – sumit

您可以使用angularJS $過濾服務來進行排序和前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>

來源

2017-08-02 21:39:54 flyer

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);

只需添加另一個地圖或減少到最後得到所需格式的結果。

來源

2017-08-02 21:40:20 pethel

如何使用角度排序和選擇JSON數組中的前5個元素JS

回答

相關問題