What is the best way to determine the total number of rows that include a specific value?

Question

What is the best way to determine the total number of rows that include a specific value?

Using AngularJS, I have a table that is populated with data using the ng-repeat directive. Here is an example:

I am looking for a way to determine the number of rows in the table that contain a specific value. For instance, in the provided fiddle, how can I identify the number of rows that contain the word "second"? It should return "3".

I would prefer solutions using AngularJS, but I also have JQuery at my disposal.

Thank you!

javascript jquery angularjs angular-datatables

Answer 1

Answer №1

The updated controller code provided below includes the necessary $scope.findRowCount function:

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

function MyCtrl($scope) {
    $scope.items = [{
        name: 'first',
        examples: [{
            name: 'first 1'
        }, {
            name: 'first 2'
        }]
    }, {
        name: 'second',
        examples: [{
            name: 'second'
        }, {
            name: 'second'
        }]
    }];


    $scope.findRowCount=function(value){

    var count=0;
    angular.forEach($scope.items, function(item, i){
    if(item.name==value){

      count=count+1;


    }
    angular.forEach(item.examples, function(exp, j){

    if(exp.name==value){

      count=count+1;


    }

    })




    });
    console.log("count"+count);
    return count;
    }

    var result=$scope.findRowCount("second");
    console.log(result);
}

http://jsfiddle.net/p3g9vyud/

Answer 2

The updated controller code provided below includes the necessary $scope.findRowCount function:

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

function MyCtrl($scope) {
    $scope.items = [{
        name: 'first',
        examples: [{
            name: 'first 1'
        }, {
            name: 'first 2'
        }]
    }, {
        name: 'second',
        examples: [{
            name: 'second'
        }, {
            name: 'second'
        }]
    }];


    $scope.findRowCount=function(value){

    var count=0;
    angular.forEach($scope.items, function(item, i){
    if(item.name==value){

      count=count+1;


    }
    angular.forEach(item.examples, function(exp, j){

    if(exp.name==value){

      count=count+1;


    }

    })




    });
    console.log("count"+count);
    return count;
    }

    var result=$scope.findRowCount("second");
    console.log(result);
}

http://jsfiddle.net/p3g9vyud/

Answer 3

Answer №2

Here is a different approach

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

function MyCtrl($scope) {
    $scope.items = [{
        name: 'first',
        examples: [{
            name: 'first 1'
        }, {
            name: 'first 2'
        }]
    }, {
        name: 'second',
        examples: [{
            name: 'second'
        }, {
            name: 'second'
        }]
    }];
  //Increment sum based on the keyword
  $scope.getTotalByLabel = function(keyword)
  {
    $scope.totalSecond = 0;
    angular.forEach($scope.items, function(value, key) {
        if(value.name == keyword)
        {
          $scope.totalSecond += 1;
        }
        angular.forEach(value.examples, function(val, k) {
          if(val.name == keyword)
          {
            $scope.totalSecond += 1;
          }
        });
    });
    return $scope.totalSecond;
  }
}

th,
td {
    padding: 7px;
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <table border="1">
        <tbody ng:repeat="i in items">
            <tr>
                <td>{{i.name}}</td>
                <td>{{$index}}</td>
            </tr>
            <tr ng:repeat="e in i.examples">
                <td>{{e.name}}</td>
                <td>{{$index}}</td>
            </tr>
        </tbody>
    </table>
    <b>Total of second</b>: {{getTotalByLabel('second')}}
</div>
</div>

Answer 4

Here is a different approach

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

function MyCtrl($scope) {
    $scope.items = [{
        name: 'first',
        examples: [{
            name: 'first 1'
        }, {
            name: 'first 2'
        }]
    }, {
        name: 'second',
        examples: [{
            name: 'second'
        }, {
            name: 'second'
        }]
    }];
  //Increment sum based on the keyword
  $scope.getTotalByLabel = function(keyword)
  {
    $scope.totalSecond = 0;
    angular.forEach($scope.items, function(value, key) {
        if(value.name == keyword)
        {
          $scope.totalSecond += 1;
        }
        angular.forEach(value.examples, function(val, k) {
          if(val.name == keyword)
          {
            $scope.totalSecond += 1;
          }
        });
    });
    return $scope.totalSecond;
  }
}

th,
td {
    padding: 7px;
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <table border="1">
        <tbody ng:repeat="i in items">
            <tr>
                <td>{{i.name}}</td>
                <td>{{$index}}</td>
            </tr>
            <tr ng:repeat="e in i.examples">
                <td>{{e.name}}</td>
                <td>{{$index}}</td>
            </tr>
        </tbody>
    </table>
    <b>Total of second</b>: {{getTotalByLabel('second')}}
</div>
</div>

What is the best way to determine the total number of rows that include a specific value?

Answer №1

Answer №2

Similar questions

Adjustable Cursor - modify size while in motion at high speeds

Tips for properly handling special characters in DOM elements

Utilizing sorting and filtering functionalities on an Angular data table

Exploring the functionality of LINQ for sorting and searching through IEnumerable collections

Tips for transitioning from Angular to Angular 2: Overcoming key challenges

resolving table refresh problem with the use of ajax, JQuery, and JSON

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

What is the outcome of XmlHttpRequest.responseText?

What is the proper way to place the authorization header for a background image using the url()

The try and catch block in JavaScript is failing to correctly capture the HTTP status

Steps to remove a specific child element using jQuery:

How can JavaScript allow access to files outside of a web server environment? Could .htaccess provide a

Problem with IE off-canvas scrolling

Using JSON parsing to dynamically create classes with preloaded background images

Responsive Alignment of Slanted Edges using CSS

Issue with undefined arrays in the Angular merge sort visualization tool

Turn off scroll bar to create a seamless browsing experience on your website

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

Creating dynamic form groups that allow for the addition and removal of forms while assigning unique identifiers and names to each input field