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

Solution 1:

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

functionMyCtrl($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; 
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="myApp"ng-controller="MyCtrl"><table><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><tbodyng-repeat="(key, value) in grouped"><trng-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><trclass="total"><td>TOTAL</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>

Solution 2:

If you just need to display all your data, you do not need that part of your code :

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;

And to display your data nicely, I'd propose to use a table like that :

<divng-controller="MyCtrl"><tableclass="table"><tr><th>ID</th><th>Name</th><th>Town</th><th>Stat1</th><th>Stat2</th><th>Stat3</th><th>Stat4</th></tr><trng-repeat="row in rowCollection"><td>{{ row.id }}</td><td>{{ row.nom }}</td><td>{{ row.town }}</td><td>{{ row.date }}</td><td>{{ row.stat1 }}</td><td>{{ row.stat2 }}</td><td>{{ row.stat3 }}</td><td>{{ row.stat4 }}</td></tr></table></div>

• Here's the result : (I added Bootstrap CSS to have a nice table)

• Here's the updated JSFiddle : https://jsfiddle.net/maxime1992/0Lqf2dyr/1/