I'm just starting with Angular and I'm struggling to figure out how to count all the results from a filtered array. The issue is that the data I need to filter is nested within a second-level array. I've searched for solutions on Stack Overflow, but none of them have worked for me. Here's what I currently have:
app.controller('mainController', function ($scope, $http, $location, $filter) {
var externalData1 = [];
var externalData2 = [];
var externalData3 = [];
var externalData4 = [];
$http.get('app/data.json').then(function (data) {
externalData1 = data.data;
externalData2 = data.data; // This will vary in different cases, but the structure of the arrays remains the same
externalData3 = data.data;
externalData4 = data.data;
$scope.Headers = [
{
'headerTitle': 'Morning Taskforce',
'headerLinkCode': 'TFC',
'headerData': externalData1
},
{
'headerTitle': 'Op Taskforce',
'headerLinkCode': 'opr',
'headerData': externalData2
},
{
'headerTitle': 'SAM Taskforce',
'headerLinkCode': 'sbgr',
'headerData': externalData3
},
{
'headerTitle': 'Undefined Section Taskforce',
'headerLinkCode': 'ufts',
'headerData': externalData4
}
];
$scope.pendingCount = $filter('pendingFilter')($scope.Headers.headerData, { autr: 'PENDING' }).length;
});
});
The structure of the data stored in data.json looks like this:
[
{
"_id": "569fd9c251f51d316e12efbe",
"actionTaken": "PENDING",
"actionTakenCode": "P",
"autr": false,
"action": "CANCEL",
"actionAvailCode": "A",
"tp": "male",
"cta": 45.558392,
"doc": 25.395304,
"offset": 68305.2342,
"client": "George Oneil",
"terminal": 9215.6905
},
{
"_id": "569fd9c27e048c82ce0564a4",
"actionTaken": "CANCELED",
"actionTakenCode": "C",
"autr": false,
"action": "AUTHORIZE",
"actionAvailCode": "A",
"tp": "male",
"cta": 87.114735,
"doc": -142.965417,
"offset": 827448.2097,
"client": "Fischer Ballard",
"terminal": 2654.5002
}
]
In my view template, I display the information as follows:
<ul data-role="listview" ng-repeat="header in Headers">
<li data-role="list-divider" data-theme="a"><h2>{{header.headerTitle}}</h2></li>
<li>
<table data-role="table" class="ui-grid-b ui-responsive table-stroke">
<thead>
<tr>
<th>
ACTION TAKEN
</th>
<th>
OWNER
</th>
<th>
TP
</th>
<th>
CT
</th>
<th>
DOCUMENT
</th>
<th>
MF47
</th>
<th>
CLIENT
</th>
<th>
BUREAUS
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in header.headerData | orderBy: '-amount'">
<td>
<span class="indicator action-{{item.actionTakenCode}}">{{item.actionTaken}}</span>
</td>
<td>
{{item.autr}}
</td>
<td>
{{item.tp}}
</td>
<td>
{{item.cta}}
</td>
<td>
{{item.doc}}
</td>
<td>
<b>{{item.offset}}</b>
</td>
<td>
{{item.client}}
</td>
<td>
{{item.terminal}}
</td>
</tr>
</tbody>
</table>
</li>
</ul>
Currently, this setup creates tables for each header and displays the rows of data from the sub level arrays. However, I'd like to add an additional field to show the total number of PENDING items across all tables, which I attempted to achieve using the pendingCount variable without success.
<div id="overview">PENDING OPERATORS = {{pendingCount}} </div>