Master the art of handling JSON data within an Angular controller

Question

Master the art of handling JSON data within an Angular controller

I've been spending a day attempting to manipulate a JSON in order to display a table, but I can't seem to achieve the desired outcome.

My goal is to showcase statistics in a table for each town. If a town has multiple lines, I want to display a subTotal line as well.

The expected output should look like this:

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 | .....

This is the code snippet from my controller:

$scope.rowCollection = [ 
        // JSON data goes here
    ];

    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);

I'm struggling with understanding why the length of my Array is showing as "0". Even when I try to increment it, it still doesn't work. Is this normal behavior?

Thank you for any assistance you can provide.

For further reference, here is a link to the jsfiddle: https://jsfiddle.net/ohu6dhqy/

javascript angularjs json

Answer 1

Answer №1

const application = angular.module('application', []);

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

  var groupedData = {};
  var totalData = {
    "totalStat1": 0,
    "totalStat2": 0,
    "totalStat3": 0,
    "totalStat4": 0,
  };

  $scope.dataCollection.forEach(function(item) {
    groupedData[item.city] = groupedData[item.city] || {};
    groupedData[item.city].array = groupedData[item.city].array || [];
    groupedData[item.city].total = groupedData[item.city].total || {
      "totalStat1": 0,
      "totalStat2": 0,
      "totalStat3": 0,
      "totalStat4": 0,
    };
    groupedData[item.city].array.push(item);
    groupedData[item.city].total.totalStat1 += item.stat1;
    groupedData[item.city].total.totalStat2 += item.stat2;
    groupedData[item.city].total.totalStat3 += item.stat3;
    groupedData[item.city].total.totalStat4 += item.stat4;

    totalData.totalStat1 += item.stat1;
    totalData.totalStat2 += item.stat2;
    totalData.totalStat3 += item.stat3;
    totalData.totalStat4 += item.stat4;
  });
  $scope.groupedData = groupedData;
  $scope.totalData = totalData;

}

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="application" ng-controller="Controller">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>City</th>
        <th>Date</th>
        <th>Stat1</th>
        <th>Stat2</th>
        <th>Stat3</th>
        <th>Stat4</th>
      </tr>
    </thead>
    <tbody ng-repeat="(key, value) in groupedData">
      <tr ng-repeat="val in value.array">
        <td>{{val.id}}</td>
        <td>{{val.city}}</td>
        <td>{{val.name}}</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 : {{totalData.totalStat1}} -
    Total stat 2 : {{totalData.totalStat2}} -
    Total stat 3 : {{totalData.totalStat3}} -
    Total stat 4 : {{totalData.totalStat4}} -
  </div>
</div>

Answer 2

const application = angular.module('application', []);

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

  var groupedData = {};
  var totalData = {
    "totalStat1": 0,
    "totalStat2": 0,
    "totalStat3": 0,
    "totalStat4": 0,
  };

  $scope.dataCollection.forEach(function(item) {
    groupedData[item.city] = groupedData[item.city] || {};
    groupedData[item.city].array = groupedData[item.city].array || [];
    groupedData[item.city].total = groupedData[item.city].total || {
      "totalStat1": 0,
      "totalStat2": 0,
      "totalStat3": 0,
      "totalStat4": 0,
    };
    groupedData[item.city].array.push(item);
    groupedData[item.city].total.totalStat1 += item.stat1;
    groupedData[item.city].total.totalStat2 += item.stat2;
    groupedData[item.city].total.totalStat3 += item.stat3;
    groupedData[item.city].total.totalStat4 += item.stat4;

    totalData.totalStat1 += item.stat1;
    totalData.totalStat2 += item.stat2;
    totalData.totalStat3 += item.stat3;
    totalData.totalStat4 += item.stat4;
  });
  $scope.groupedData = groupedData;
  $scope.totalData = totalData;

}

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="application" ng-controller="Controller">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>City</th>
        <th>Date</th>
        <th>Stat1</th>
        <th>Stat2</th>
        <th>Stat3</th>
        <th>Stat4</th>
      </tr>
    </thead>
    <tbody ng-repeat="(key, value) in groupedData">
      <tr ng-repeat="val in value.array">
        <td>{{val.id}}</td>
        <td>{{val.city}}</td>
        <td>{{val.name}}</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 : {{totalData.totalStat1}} -
    Total stat 2 : {{totalData.totalStat2}} -
    Total stat 3 : {{totalData.totalStat3}} -
    Total stat 4 : {{totalData.totalStat4}} -
  </div>
</div>

Answer 3

Answer №2

If you want to efficiently organize and display your data, consider optimizing your code in the following way:

let dataArray = [];
for (let index = 0; index < $scope.rowCollection.length; index++) {
    if (Array.isArray(dataArray[$scope.rowCollection[index].city])) {
        dataArray[$scope.rowCollection[index].city].push($scope.rowCollection[index]);
    } else {
        dataArray[$scope.rowCollection[index].city] = $scope.rowCollection[index];
    }
}

$scope.dataArray = dataArray;

To present your data in a well-structured manner, utilize a table setup like this:

<div ng-controller="MyCtrl">
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>City</th>
      <th>Date</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.name }}</td>
      <td>{{ row.city }}</td>
      <td>{{ row.date }}</td>
      <td>{{ row.stat1 }}</td>
      <td>{{ row.stat2 }}</td>
      <td>{{ row.stat3 }}</td>
      <td>{{ row.stat4 }}</td>
    </tr>
  </table>
</div>

Take a look at the outcome: (I included Bootstrap CSS for a polished appearance) https://i.sstatic.net/89sa6.png
Check out the updated JSFiddle link here: https://jsfiddle.net/maxime1992/3Bqb7atc/1/

Answer 4

If you want to efficiently organize and display your data, consider optimizing your code in the following way:

let dataArray = [];
for (let index = 0; index < $scope.rowCollection.length; index++) {
    if (Array.isArray(dataArray[$scope.rowCollection[index].city])) {
        dataArray[$scope.rowCollection[index].city].push($scope.rowCollection[index]);
    } else {
        dataArray[$scope.rowCollection[index].city] = $scope.rowCollection[index];
    }
}

$scope.dataArray = dataArray;

To present your data in a well-structured manner, utilize a table setup like this:

<div ng-controller="MyCtrl">
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>City</th>
      <th>Date</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.name }}</td>
      <td>{{ row.city }}</td>
      <td>{{ row.date }}</td>
      <td>{{ row.stat1 }}</td>
      <td>{{ row.stat2 }}</td>
      <td>{{ row.stat3 }}</td>
      <td>{{ row.stat4 }}</td>
    </tr>
  </table>
</div>

Take a look at the outcome: (I included Bootstrap CSS for a polished appearance) https://i.sstatic.net/89sa6.png
Check out the updated JSFiddle link here: https://jsfiddle.net/maxime1992/3Bqb7atc/1/

Master the art of handling JSON data within an Angular controller

Answer №1

Answer №2

Similar questions

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

Challenges with ColdFusion's floating point calculations

Optimal methods for organizing various perspectives on a one-page website

Using JSON data to populate an HTML page

What is the reason for innerHTML not functioning properly when trying to include HTML?

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

Steps for displaying search results based on state when a button is clicked

Checkbox malfunctioning when trying to add values after being checked

Getting console data in AngularJS can be achieved by using the console.log()

Tips for separating these two words onto two separate lines

What is the most straightforward AngularJs 'Hello World' example you would use when introducing AngularJs to a newcomer?

Decoding JSON Array Data Sent via Ajax请求

Discovering the true nature of a generic Type in TypeScript

Forwarding HTTP POST requests containing JSON data

Adding Material-UI icons dynamically in a React TypeScript project requires understanding the integration of imported icons

Guidelines for utilizing a loader to handle a TypeScript-based npm module

ng-hide and ng-switch slow down content visibility

Modify the main element of a component

Utilizing curl to interact with an associative JSON array

Within a single component, there are various types present when looping through an array containing objects