Group By feature in AngularJS

Question

Group By feature in AngularJS

Hey there, I'm trying to display a table from the code provided below. The issue I'm facing is with grouping by name. Here's how I want the view to appear:

 Shareholder | Preferred Stock | Common Stock | Options | Percentage |
|-------------+-----------------+--------------+---------+------------|
| Robert      |              35 |           20 |      15 |        54% |
| Bert        |              20 |           20 |      10 |        38% |
| Elizabeth   |              10 |              |         |         8% |
| Total       |              65 |           40 |      25 |       100% |
*/

angular.module('myApp.view2', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    templateUrl: 'view2/view2.html',
    controller: 'View2Ctrl'
  });
}])



.controller('View2Ctrl', ['$scope', function($scope) {
    $scope.transactions = [
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-3' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-5' },
    { security: 'Common Stock',     name: 'Bert',      value: 20,  date: '2014-1-6' },
    { security: 'Preferred Stock',  name: 'Elizabeth', value: 10,  date: '2014-1-6' },
    { security: 'Common Stock',     name: 'Robert',    value: 20,  date: '2014-1-9' },
    { security: 'Preferred Stock',  name: 'Bert',      value: 20,  date: '2014-1-11' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-12' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 15,  date: '2014-1-12' },
    { security: 'Options',          name: 'Bert',      value: 10,  date: '2014-1-13' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-14' },
    { security: 'Options',          name: 'Robert',    value: 15,  date: '2014-1-17' }
    ];
}]);

javascript angularjs database group-by

Answer 1

Answer №1

To group items together, you can utilize the reduce function.

angular.module('myApp.view2', [])
  .controller('View2Ctrl', ['$scope', '$filter',
    function($scope, $filter) {

      $scope.securities = ['Preferred Stock', 'Common Stock', 'Options'];

      // Array of transactions
      $scope.transactions = [{
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-3'
      }, {
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-5'
      },
      ...
      ];

      // Function to add values to a specific group
      function addValue(obj, name, el) {
        var group = obj.securities[name];
        var result = [];
        
        if (!group) {
          obj.securities[name] = group = {name: name};
          result.push(group);
        }

        group[el.security] = (group[el.security] || 0) + el.value;
        group['all'] = (group['all'] || 0) + el.value;

        return result;
      }

      // Function to calculate percentage
      function fixPercent(transactions, total) {
        var totalPercent = 0;
        transactions.forEach(function(el) {
          el.percent = Math.round(100 * el.all / total.all);
          totalPercent += el.percent;
        });

        transactions[transactions.length - 1].percent += 100 - totalPercent;
      }

      // Reduce method to group transactions
      var grouppedTransactions = $scope.transactions.reduce(function(acc, el) {
        acc.total = addValue(acc, 'Total', el)[0] || acc.total;
        acc.result = acc.result.concat(addValue(acc, el.name, el));

        return acc;
      }, {
        securities: {},
        result: [],
        total: {}
      });

      // Display and sort grouped results
      $scope.grouppedTransactions = $filter('orderBy')(grouppedTransactions.result, '-all');
      $scope.total = grouppedTransactions.total;

      // Calculate and adjust percentages
      fixPercent($scope.grouppedTransactions, $scope.total);
    }
  ]);


// CSS style for table formatting
<pre class="snippet-code-css lang-css"><code>table,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

// AngularJS setup script with HTML code for displaying data in a table

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="myApp.view2" ng-controller="View2Ctrl">
  <table>
    <thead>
      <tr>
        <th>Shareholder</th>
        <th>Preferred Stock</th>
        <th>Common Stock</th>
        <th>Options</th>
        <th>Percentage</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="sec in grouppedTransactions">
        <td>{{sec.name}}</td>
        <td ng-repeat="secutiry in securities">{{sec[secutiry]}}</td>
        <td>{{sec.percent}}%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>{{total.name}}</td>
        <td ng-repeat="secutiry in securities">{{total[secutiry]}}</td>
        <td>100%</td>
      </tr>
    </tfoot>
  </table>
</div>

Answer 2

To group items together, you can utilize the reduce function.

angular.module('myApp.view2', [])
  .controller('View2Ctrl', ['$scope', '$filter',
    function($scope, $filter) {

      $scope.securities = ['Preferred Stock', 'Common Stock', 'Options'];

      // Array of transactions
      $scope.transactions = [{
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-3'
      }, {
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-5'
      },
      ...
      ];

      // Function to add values to a specific group
      function addValue(obj, name, el) {
        var group = obj.securities[name];
        var result = [];
        
        if (!group) {
          obj.securities[name] = group = {name: name};
          result.push(group);
        }

        group[el.security] = (group[el.security] || 0) + el.value;
        group['all'] = (group['all'] || 0) + el.value;

        return result;
      }

      // Function to calculate percentage
      function fixPercent(transactions, total) {
        var totalPercent = 0;
        transactions.forEach(function(el) {
          el.percent = Math.round(100 * el.all / total.all);
          totalPercent += el.percent;
        });

        transactions[transactions.length - 1].percent += 100 - totalPercent;
      }

      // Reduce method to group transactions
      var grouppedTransactions = $scope.transactions.reduce(function(acc, el) {
        acc.total = addValue(acc, 'Total', el)[0] || acc.total;
        acc.result = acc.result.concat(addValue(acc, el.name, el));

        return acc;
      }, {
        securities: {},
        result: [],
        total: {}
      });

      // Display and sort grouped results
      $scope.grouppedTransactions = $filter('orderBy')(grouppedTransactions.result, '-all');
      $scope.total = grouppedTransactions.total;

      // Calculate and adjust percentages
      fixPercent($scope.grouppedTransactions, $scope.total);
    }
  ]);


// CSS style for table formatting
<pre class="snippet-code-css lang-css"><code>table,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

// AngularJS setup script with HTML code for displaying data in a table

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="myApp.view2" ng-controller="View2Ctrl">
  <table>
    <thead>
      <tr>
        <th>Shareholder</th>
        <th>Preferred Stock</th>
        <th>Common Stock</th>
        <th>Options</th>
        <th>Percentage</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="sec in grouppedTransactions">
        <td>{{sec.name}}</td>
        <td ng-repeat="secutiry in securities">{{sec[secutiry]}}</td>
        <td>{{sec.percent}}%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>{{total.name}}</td>
        <td ng-repeat="secutiry in securities">{{total[secutiry]}}</td>
        <td>100%</td>
      </tr>
    </tfoot>
  </table>
</div>

Answer 3

Answer №2

While this code snippet may not provide a complete solution, it can serve as a helpful starting point:

let groupedResults = {};
$scope.transactions.forEach(function(transaction) {
  let group;
  if (groupedResults.name) {
    group = groupedResults.name;
  } else {
    group = {name: transaction.name};
    group[name] = group;
  }
  if (group[transaction.security]) {
    group[transaction.security] += transaction.value;
  } else {
    group[transaction.security] = transaction.value;
  }
});

Answer 4

While this code snippet may not provide a complete solution, it can serve as a helpful starting point:

let groupedResults = {};
$scope.transactions.forEach(function(transaction) {
  let group;
  if (groupedResults.name) {
    group = groupedResults.name;
  } else {
    group = {name: transaction.name};
    group[name] = group;
  }
  if (group[transaction.security]) {
    group[transaction.security] += transaction.value;
  } else {
    group[transaction.security] = transaction.value;
  }
});

Answer 5

Answer №3

Challenge yourself to calculate the percentage on your own!

var transactions = [
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-3' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-5' },
    { security: 'Common Stock',     name: 'Bert',      value: 20,  date: '2014-1-6' },
    { security: 'Preferred Stock',  name: 'Elizabeth', value: 10,  date: '2014-1-6' },
    { security: 'Common Stock',     name: 'Robert',    value: 20,  date: '2014-1-9' },
    { security: 'Preferred Stock',  name: 'Bert',      value: 20,  date: '2014-1-11' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-12' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 15,  date: '2014-1-12' },
    { security: 'Options',          name: 'Bert',      value: 10,  date: '2014-1-13' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-14' },
    { security: 'Options',          name: 'Robert',    value: 15,  date: '2014-1-17' }
    ];

var summary = [];
var total = {name: 'Total', 'Preferred Stock': 0, 'Common Stock': 0, 'Options': 0};

for(var i = 0; i < transactions.length; i++) {
  var sec = transactions[i].security;
  var val = transactions[i].value;
  total[sec] += val;

  var found = false;
  for(var j = 0; j < summary.length; j++) {
    if(transactions[i].name === summary[j].name) {
      summary[j][sec] += val;
      found = true;
    }
  }

  if(!found) {
    var item = {name: transactions[i].name, 'Preferred Stock': 0, 'Common Stock': 0, 'Options': 0 };
    item[sec] += val;
    summary.push(item);
  }
}

summary.push(total);

console.log(summary);

Answer 6

Challenge yourself to calculate the percentage on your own!

var transactions = [
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-3' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-5' },
    { security: 'Common Stock',     name: 'Bert',      value: 20,  date: '2014-1-6' },
    { security: 'Preferred Stock',  name: 'Elizabeth', value: 10,  date: '2014-1-6' },
    { security: 'Common Stock',     name: 'Robert',    value: 20,  date: '2014-1-9' },
    { security: 'Preferred Stock',  name: 'Bert',      value: 20,  date: '2014-1-11' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-12' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 15,  date: '2014-1-12' },
    { security: 'Options',          name: 'Bert',      value: 10,  date: '2014-1-13' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-14' },
    { security: 'Options',          name: 'Robert',    value: 15,  date: '2014-1-17' }
    ];

var summary = [];
var total = {name: 'Total', 'Preferred Stock': 0, 'Common Stock': 0, 'Options': 0};

for(var i = 0; i < transactions.length; i++) {
  var sec = transactions[i].security;
  var val = transactions[i].value;
  total[sec] += val;

  var found = false;
  for(var j = 0; j < summary.length; j++) {
    if(transactions[i].name === summary[j].name) {
      summary[j][sec] += val;
      found = true;
    }
  }

  if(!found) {
    var item = {name: transactions[i].name, 'Preferred Stock': 0, 'Common Stock': 0, 'Options': 0 };
    item[sec] += val;
    summary.push(item);
  }
}

summary.push(total);

console.log(summary);

Group By feature in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

The Vue router requires a page reload to see changes and does not have access to the this

local individuals and local residents (duplicate) dispatched from the server

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

Tips for incorporating nonce or sha into the connect-src directive in Content Security Policy (CSP)

Understanding how to monitor a Boolean value that fluctuates in real-time within a three.js

Having trouble with AngularJS ForEach and REST/JSON calls using $resource before the JSON data is ready?

Leverage the power of Angular's $http module in conjunction with Django's urlpatterns to fetch

Retrieve the identification number for each item within my array

Ways to access dropdown menu without causing header to move using jQuery

Retrieve the reference to the plugin object from the element where the plugin is currently active

Is there a simple method to automatically increase the version number of Mongoose documents with each update request?

Problem with AngularJS: Button click triggers too quickly on tablet devices, activated by hovering with the mouse

Refreshing the page causes Material UI Button to revert to default styling

Retrieving data arrays from response.json

Unable to locate the <router-view> component within VueRouter

Retrieve Element By Class Name in JavaScript

The class type "selectLabel" passed to the classes property in index.js:1 for Material-UI is not recognized in the ForwardRef(TablePagination) component

When using Expressjs MVC, encountering difficulties in retrieving data from mongoose in the listAll() function within the router

Refresh the display in $parser

The switch switches on yet another switch