Angular JS - Display only the field with the highest value from JSON data

Question

I have a JSON retrieve from database

[{"id":1,"firstname":"Alan Cayetano","numbers":2},{"id":2,"firstname":"Bong     Marcos","numbers":0},{"id":3,"firstname":"I Dont Care","numbers":3},{"id":4,"firstname":"toto tata","numbers":0},{"id":5,"firstname":"titi terter","numbers":0},{"id":6,"firstname":"Ian Go","numbers":0}]

this is the result when displayed in table result

firstname   lastname   numbers
Alan        Cayetano    10
Bong        Marcos      4
Ian         Go          3
What        Ever        0

I only want the data with the highest number value In this case

firstname    lastname   numbers
Alan         Cayetano    10

This data is dynamically fetch from database

My angular.js

<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script>
    var app = angular.module('myApp', []);

    app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
    });

    app.controller('customersCtrl',['$scope','$http',function($scope, $http) {
        //$http.get("http://localhost:8093/voters/voters_angular")
        $http.get("{{ path('vp_president') }}")
        .success(function (response) {
            $scope.names= JSON.parse(response);
        });
    }]);
    //console.log(names);
</script>

Table

<div ng-app="myApp" ng-controller="customersCtrl">
<table class="table">
    //names//

    <thead>
        <tr>
            <th>Firsname</th>
            <th>Lastname</th>
            <th>NUm</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in names">
            <td>//x.firstname//</td> 
            <td>//x.lastname//</td>
            <td>//x.numbers//</td>
        </tr>
    </tbody> 
</table>
</div>

How to achieve this? I am still learning Angular Js I wonder if Angular's $last filter will work on this

I am new to Angular and I want to loop first all result then in other part of the template, the highest value should be displayed. — Danielle Rose Mabunga
– Danielle Rose Mabunga, Commented Nov 27, 2015 at 15:02

user2338925 · Accepted Answer · 2015-11-27 15:56:06Z

2

This should work as describe

Link

<tr ng-repeat="x in names| orderBy:'-numbers' | limitTo:1">
    <td>//x.id//</td> 
    <td>//x.firstname//</td>
    <td>//x.numbers//</td>
</tr>

answered Nov 27, 2015 at 15:56

user2338925

Sign up to request clarification or add additional context in comments.

Comments

cagica · Accepted Answer · 2015-11-27 15:06:15Z

1

It's better to find your max in the controller, not in the view.

  function findMax(names) {
        var result = null;
        for (var i = 0; i < names.length; i++) {
            var name = names[i];
            if (result == null || name.numbers > result.numbers) {
                result = name;
            }
        }
        return result;
    }

$scope.name = findMax($scope.names);

And in html

<tr>
    <td>{{name.firstname}}</td> 
    <td>{{name.lastname}}</td>
    <td>{{name.numbers}}</td>
</tr>

In AngularJS it's better to pre-sort your data before showing in the view, the ng-repeat creates a watcher for each object it repeat's, in AngularJS the number of watchers is associated with performance if you have many watchers your performance it's worst.

If you don't need the other values to appear, there is no need to create watchers for that values, so it's better to pre-sort the array.

edited Nov 27, 2015 at 15:06

answered Nov 27, 2015 at 15:01

cagica

6794 silver badges23 bronze badges

2 Comments

Danielle Rose Mabunga Over a year ago

I got this error TypeError: Cannot read property 'length' of undefined

cagica Over a year ago

You have to put the findMax($scope.names) in your http response, it's when you have your $scope.names populated

Przemek · Accepted Answer · 2015-11-27 15:22:42Z

1

you can do this :

<tr ng-repeat="x in names | orderBy:numbers:reverse | limitTo:1">

edited Nov 27, 2015 at 15:22

answered Nov 27, 2015 at 15:02

Przemek

8034 silver badges15 bronze badges

5 Comments

Danielle Rose Mabunga Over a year ago

this result in displaying the lowest value.

Przemek Over a year ago

add after numbers ":reverse"

Danielle Rose Mabunga Over a year ago

I will check my JSON file.reverse doesnt work as well

Danielle Rose Mabunga Over a year ago

I found out that the first item in JSON will always show no matter how its value.

Przemek Over a year ago

so it should be 'numbers'

Luis · Accepted Answer · 2015-11-27 15:03:29Z

-1

You can use:

angular.forEach($scope.names, function (value, key) { //code });

With angular foreach you can read row by row in your $scope.names, and use your logic for get the msx value.

When:

key -> is the position (use an alert(key) to see the info)

value -> is a the row of the json. For get data use value.id, value.firstname, etc.

answered Nov 27, 2015 at 15:03

Luis

644 bronze badges

Collectives™ on Stack Overflow

Angular JS - Display only the field with the highest value from JSON data

4 Answers 4

Comments

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related