var app = angular.module('plunker', ['ngResource','angular.filter']);
var tradeCtrlFn = function($scope,getData){
$scope.dataInJson = {};
var arraySymbol = [];
getData.get(function(data){
$scope.dataInJson = data.trades;
console.log(data);
})
}
app.controller('tradeCtrl',['$scope','getData',tradeCtrlFn]);
app.factory('getData',['$resource',function($resource){
return $resource('trades.json');
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.10/angular-resource.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
</head>
<body ng-controller="tradeCtrl">`
<h3>GroupBy filter</h3>
<div>
Here we are initially grouping by the symbol and inside each symbol we are grouping by
Action.
</div>
<table>
<tr ng-repeat="(key,value) in dataInJson | groupBy:'Symbol'">
<td valign="top" class="groupColumns">
{{key}}
</td>
<td>
<table>
<tr ng-repeat="(k,v) in value | groupBy:'Action'">
<td valign="top" class="groupColumns">
{{k}}
</td>
<td>
<table>
<tr>
<th>TxnId</th>
<th>Quantity</th>
<th>Price</th>
<th>MarketValue</th>
</tr>
<tr ng-repeat="opt in v | orderBy:'TxnId'">
<td>
{{opt.TxnId}}
</td>
<td> {{opt.Quantity}}
</td>
<td> {{opt.Price}}
</td>
<td> {{opt.MarketValue}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */
.groupColumns{
padding: 5px;
}
.spaceLeft{
margin-left: 5px;
}
table{
border-collapse: separate;
border-spacing: 10px;
}
{
"trades":
[
{"TxnId":3 , "Symbol":"IBM" , "Action":"Buy" , "Quantity":100, "Price":50 , "MarketValue":5000} ,
{"TxnId":5 , "Symbol":"XOM" , "Action":"Buy" , "Quantity":90, "Price":40 , "MarketValue":3600} ,
{"TxnId":1 , "Symbol":"IBM" , "Action":"Buy" , "Quantity":200, "Price":51 , "MarketValue":10200} ,
{"TxnId":4 , "Symbol":"IBM" , "Action":"Sell" , "Quantity":150, "Price":52 , "MarketValue":-7800} ,
{"TxnId":2 , "Symbol":"XOM" , "Action":"Buy" , "Quantity":80, "Price":41 , "MarketValue":3280} ,
{"TxnId":6 , "Symbol":"XOM" , "Action":"Sell" , "Quantity":70, "Price":43 , "MarketValue":-3010} ,
{"TxnId":7 , "Symbol":"BAC" , "Action":"Buy" , "Quantity":1000, "Price":15 , "MarketValue":15000} ,
{"TxnId":8 , "Symbol":"XOM" , "Action":"Buy" , "Quantity":20, "Price":43 , "MarketValue":860} ,
{"TxnId":9 , "Symbol":"IBM" , "Action":"Buy" , "Quantity":100, "Price":53 , "MarketValue":5300} ,
{"TxnId":10 , "Symbol":"IBM" , "Action":"Sell" , "Quantity":50, "Price":54 , "MarketValue":-2700} ,
{"TxnId":11 , "Symbol":"XOM" , "Action":"Sell" , "Quantity":120, "Price":44 , "MarketValue":-5280} ,
{"TxnId":12 , "Symbol":"BAC" , "Action":"Sell" , "Quantity":250, "Price":12 , "MarketValue":-3000} ,
{"TxnId":13 , "Symbol":"IBM" , "Action":"Sell" , "Quantity":200, "Price":55 , "MarketValue":-11000}
]
}