角度JSを使用してJSON配列の上位5要素をソートして選択する方法

Java.util.HashMapオブジェクトをJSONとして返すREST APIがあります。角度JSを使用してJSON配列の上位5要素をソートして選択する方法

それは形式でデータを持っている（このようないくつかの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

あなたはそれに関連するカウント値とslice()結果によってキーをsort()ことができます。

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

あなたはソートや上位nを行うにangularJS $フィルタサービスを使用することができます。

(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

角度JSを使用してJSON配列の上位5要素をソートして選択する方法

答えて

関連する問題