pop_up pop_up - 25 days ago 9
Javascript Question

manipulate JSON in angular controller

I spent a day trying to manipulate a JSON do display a table but i can't reach to do what i want.

i want to display stats in a table for each town.
i have to regroup lines for the same town
I a town has several lines, i want to display a subTotal line

So the supposes ouput is :


  • line 1 | PARIS | BUILDING A .....

  • line 2 | PARIS | BUILDING D .....

  • subTotal| PARIS | BUILDINGS .....

  • line 3 | LONDON | BUILDING B .....

  • line 4 | LONDON | BUILDING F .....

  • subTotal| LONDON | BUILDINGS .....

  • line 5 | TOKYO | BUILDING C .....

  • line 6 | CHICAGO| BUILDING E .....

  • TOTAL | ALL | .....



The code in my controller:

$scope.rowCollection = [
{
"id": "1",
"nom": "BUILDING A",
"town": "PARIS",
"date": "2015-11-09",
"stat1": 3,
"stat2": 115,
"stat3": 4,
"stat4": 111
},
{
"id": "2",
"nom": "BUILDING B",
"town": "LONDON",
"date": "2013-11-09",
"stat1": 1,
"stat2": 51,
"stat3": 1,
"stat4": 50
},
{
"id": "3",
"nom": "BUILDING C",
"town": "TOKYO",
"date": "2012-10-21",
"stat1": 0,
"stat2": 142,
"stat3": 0,
"stat4": 142
},
{
"id": "4",
"nom": "BUILDING D",
"town": "PARIS",
"date": "2011-02-03",
"stat1": 0,
"stat2": 132,
"stat3": 0,
"stat4": 132
},
{
"id": "5",
"nom": "BUILDING E",
"town": "CHICAGO",
"stat1": 0,
"stat2": 94,
"stat3": 0,
"stat4": 94
},
{
"id": "6",
"nom": "BUILDING F",
"town": "LONDON",
"date": "0000-00-00",
"stat1": 0,
"stat2": 86,
"stat3": 0,
"stat4": 86
}
];

var myArray = [];
for (var i = 0; i < $scope.rowCollection.length; i++) {
if (Array.isArray(myArray[$scope.rowCollection[i].town])) {
myArray[$scope.rowCollection[i].town].push($scope.rowCollection[i]);
} else {
myArray[$scope.rowCollection[i].town] = $scope.rowCollection[i];
}
}


$scope.myArray = myArray;
console.log($scope.myArray);


What am i doing wrong ? i saw the lenght oh my Array was "0". I can increment it but i doesn't works too. Is this normal

thanks for your help

Here is a jsfiddle :
https://jsfiddle.net/ohu6dhqy/

Answer

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.rowCollection = [{
    "id": "1",
    "nom": "BUILDING A",
    "town": "PARIS",
    "date": "2015-11-09",
    "stat1": 3,
    "stat2": 115,
    "stat3": 4,
    "stat4": 111
  }, {
    "id": "2",
    "nom": "BUILDING B",
    "town": "LONDON",
    "date": "2013-11-09",
    "stat1": 1,
    "stat2": 51,
    "stat3": 1,
    "stat4": 50
  }, {
    "id": "3",
    "nom": "BUILDING C",
    "town": "TOKYO",
    "date": "2012-10-21",
    "stat1": 0,
    "stat2": 142,
    "stat3": 0,
    "stat4": 142
  }, {
    "id": "4",
    "nom": "BUILDING D",
    "town": "PARIS",
    "date": "2011-02-03",
    "stat1": 0,
    "stat2": 132,
    "stat3": 0,
    "stat4": 132
  }, {
    "id": "5",
    "nom": "BUILDING E",
    "town": "CHICAGO",
    "stat1": 0,
    "stat2": 94,
    "stat3": 0,
    "stat4": 94
  }, {
    "id": "6",
    "nom": "BUILDING F",
    "town": "LONDON",
    "date": "0000-00-00",
    "stat1": 0,
    "stat2": 86,
    "stat3": 0,
    "stat4": 86
  }];

  var grouped = {};
  var total = {
    "totalStat1" : 0,
    "totalStat2" : 0,
    "totalStat3" : 0,
    "totalStat4" : 0,
  };

  $scope.rowCollection.forEach(function(item) {
    grouped[item.town] = grouped[item.town] || {};
    grouped[item.town].array = grouped[item.town].array || [];
    grouped[item.town].total = grouped[item.town].total || {
      "totalStat1": 0,
      "totalStat2": 0,
      "totalStat3": 0,
      "totalStat4": 0,
    };
    grouped[item.town].array.push(item);
    grouped[item.town].total.totalStat1 += item.stat1;
    grouped[item.town].total.totalStat2 += item.stat2;
    grouped[item.town].total.totalStat3 += item.stat3;
    grouped[item.town].total.totalStat4 += item.stat4;
    
    total.totalStat1 += item.stat1;
    total.totalStat2 += item.stat2;
    total.totalStat3 += item.stat3;
    total.totalStat4 += item.stat4;
  });
  $scope.grouped = grouped;
  $scope.total = total;
  
}
table {
  margin: 1rem;
  border-collapse: collapse;
  width: 55%;
}
table,
th,
td {
  border: 1px solid black;
}

.total{
 font-weight:800; 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table ng-repeat="(key, value) in grouped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Town</th>
        <th>Date</th>
        <th>Stat1</th>
        <th>Stat2</th>
        <th>Stat3</th>
        <th>Stat4</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="val in value.array">
        <td>{{val.id}}</td>
        <td>{{val.town}}</td>
        <td>{{val.nom}}</td>
        <td>{{val.date}}</td>
        <td>{{val.stat1}}</td>
        <td>{{val.stat2}}</td>
        <td>{{val.stat3}}</td>
        <td>{{val.stat4}}</td>
      </tr>
      <tr class="total">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>{{value.total.totalStat1}}</td>
        <td>{{value.total.totalStat2}}</td>
        <td>{{value.total.totalStat3}}</td>
        <td>{{value.total.totalStat4}}</td>
      </tr>
    </tbody>
  </table>
  
  <div>
    Total stat 1 : {{total.totalStat1}} -
    Total stat 2 : {{total.totalStat2}} -
    Total stat 3 : {{total.totalStat3}} -
    Total stat 4 : {{total.totalStat4}} -
  </div>
</div>