CODEWITHSUNDEEP
jsonangularjs
geostima
geostima

Reputation: 325

Count specific key/value pairs in dynamic json object

I have a json object which will contain key-value pairs for clients for example, the clients will vary on a day to day basis, depending on which ones have made a certain transaction on said day of the month. My data will therefore only contain the transactions made by clients. Here is an example of my data object for the first day of the month

$scope.dailybreakdown = [
      {'day': '1', 'client':'client1', 'received': '3', 'approved':'0'},
      {'day': '1', 'client':'client2', 'received': '8', 'approved':'1'},
      {'day': '1', 'client':'client3', 'received': '4', 'approved':'0'},
      {'day': '1', 'client':'client4', 'received': '4', 'approved':'0'},
      {'day': '2', 'client':'client1', 'received': '3', 'approved':'1'},
      {'day': '2', 'client':'client4', 'received': '12', 'approved':'5'},
      {'day': '3', 'client':'client1', 'received': '10', 'approved':'2'},
      {'day': '3', 'client':'client3', 'received': '5', 'approved':'1'},
      {'day': '3', 'client':'client8', 'received': '1', 'approved':'0'},
      {'day': '3', 'client':'client9', 'received': '2', 'approved':'2'},
]

The data for the second day may contain more or less clients and they could be different, since clients who have not made any transactions will not be present in the object whatsoever. This object would obviously contain data for every day of the month and not just for the first three day as in the sample i added above.

I am using this data to display it graphically in a table and on flot charts on my view. This is all well and good, but where I am looking for some assistance is to how to sort this data and count it.

For instance my table needs to display the total number of transacations for each day. This means I need to count all the Day 1 kay/value pairs and create totals for each field. (total received, approved & recalculate a percentage)

Since this json object could be gigantic, depending on the number of clients thats transacted each day, should I create a new json array in my controller to hold this daily data or is there a way I can filter through it and count/recalculate each day as needed?

My table row looks as follows: (which would also need to change to accomodate the data filtering done in the controller for the client totals)

<tr ng-repeat="daily in dailystats" ng-click="setSelected($index);" ng-class="{'selected':$index == selectedRow}">
                  <td>{{daily.day}}</td>
                  <td>{{daily.received}}</td>
                  <td>{{daily.approved}}</td>
                  <td>{{daily.percentage}}</td>
                </tr>

Any help would be greatly appreciated since I have not been working long with json data objects and I have not been successful in finding any resources or examples to help me with this task. To anyone willing to help, you have my gratitude in advance.

Upvotes: 1

Views: 1586

Answers (1)

Henry00
Henry00

Reputation: 421

Below is a way of going through each row in your json table and using a for loop to find all the days equal to 1, 2, 3...etc then finding the "received" total and adding them all together and pushing that total number to a new array then using ng-repeat displaying that total in a table. I hope this helps you along the right track...

Index.html

   <table>
      <thead>
        <th>Day</th>
        <th>Recieved</th>
        <th>Approved</th>
        <th>Percentage</th>
      </thead>
    <tbody>
      <tr ng-repeat="daily in dailybreakdown" ng-click="setSelected($index);" ng-class="{'selected':$index == selectedRow}">
                  <td>{{daily.day}}</td>
                  <td>{{daily.received}}</td>
                  <td>{{daily.approved}}</td>
                  <td>{{daily.percentage}}</td>
      </tr>
    </tbody>
    </table>

    <table>
      <thead>
        <th>Day</th>
        <th>Recieved</th>
      </thead>
    <tbody>
      <tr ng-repeat="day in days" ng-click="setSelected($index);" ng-class="{'selected':$index == selectedRow}">
                  <td>Day {{$index + 1}}</td>
                  <td>{{day}}</td>
      </tr>
    </tbody>
    </table>

app.js

  $scope.days = [];

  $scope.dailybreakdown = [
      {'day': '1', 'client':'client1', 'received': '3', 'approved':'0'},
      {'day': '1', 'client':'client2', 'received': '8', 'approved':'1'},
      {'day': '1', 'client':'client3', 'received': '4', 'approved':'0'},
      {'day': '1', 'client':'client4', 'received': '4', 'approved':'0'},
      {'day': '2', 'client':'client1', 'received': '3', 'approved':'1'},
      {'day': '2', 'client':'client4', 'received': '12', 'approved':'5'},
      {'day': '3', 'client':'client1', 'received': '10', 'approved':'2'},
      {'day': '3', 'client':'client3', 'received': '5', 'approved':'1'},
      {'day': '3', 'client':'client8', 'received': '1', 'approved':'0'},
      {'day': '3', 'client':'client9', 'received': '2', 'approved':'2'},
]


for(var x = 1; x <= 31; x++){
   var count = 0;
angular.forEach($scope.dailybreakdown, function(value, key) {

   if(value.day == x){
     count += parseInt(value.received,10);
   }
  });
    $scope.days.push(count);
  console.log($scope.days);
}

http://plnkr.co/edit/TK9QPwkcDWSJ1NjbH95a?p=preview

Upvotes: 1

Related Questions