manipulate JSON in angular controller

Question

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/

Can you show the full output please ? What does the total contain ? — Weedoze
– Weedoze, Commented Nov 15, 2016 at 7:37
What do you want to achieve in your for loop (.js, line 70) ? — maxime1992
– maxime1992, Commented Nov 15, 2016 at 7:38
And why do you do : if (Array.isArray(myArray[$scope.rowCollection[i].town])) ? Your town can really be an array ? — maxime1992
– maxime1992, Commented Nov 15, 2016 at 7:39
You maybe want to use a table ? It will be more clear and aligned — Weedoze
– Weedoze, Commented Nov 15, 2016 at 7:43

Weedoze · Accepted Answer · 2016-11-15 09:06:00Z

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>
    <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 ng-repeat="(key, value) in grouped">
      <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>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>

thanks for your answer, it will really help me to do what i want.
@pop_up No problem ! Dont forget to mark it as the answer if it is the case
How can i do if i want only one header for the table ? Because the first ng-repeat is on the table tag and in only want the heders one time. thanks

maxime1992 · Accepted Answer · 2016-11-15 07:47:59Z

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 :

<div ng-controller="MyCtrl">
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Town</th>
      <th>Stat1</th>
      <th>Stat2</th>
      <th>Stat3</th>
      <th>Stat4</th>
    </tr>

    <tr ng-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/

Collectives™ on Stack Overflow

manipulate JSON in angular controller

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related