AngularJS - Filtering Greatest Value From JSON

I have JSON file with a list of numerical values:

{
    "Entries": {
        "Records" : [
            {
                "Name": "Mr Happy",
                "Gender": "Male",
                "Balance": "100"
            },
            {
                "Name": "Mr Sad",
                "Gender": "Male",
                "Balance": "50"
            },
            {
                "Name": "Mrs Grump",
                "Gender": "Female",
                "Balance": "2000"
            },
            {
                "Name": "Mr Loud",
                "Gender": "Male",
                "Balance": "1000"
            } 
        ]   

    }
}

I can display the list of values via a simple ng-repeat :

<li ng-repeat="account in Entries.Records">

    {{ account.Name }},  {{ account.Balance }} 

</li>

But how can i modify/filter this ng-repeat to only show the record with the highest balance?


Updated of full controller and service:

app.controller("MyController", function($scope, $http, getReportService) {

    $scope.EntriesRecords = [];

    getReportService.getReportData(function(data) {

        $scope.EntriesRecords = data.Entries.Records;

        $scope.maxBalanceAccount = findMaxBalanceAccount();
    });


    function findMaxBalanceAccount() {
        var result = null;
        for (var i = 0; i < $scope.EntriesRecords.length; i++) {
        var account = $scope.EntriesRecords[i];
            if (result == null || account.Balance > result.Balance) {
                result = account;
            }
        }
        return result;
    }

    console.log($scope.maxBalanceAccount);

});


app.factory('getReportService', function($http) {
    return {
        getReportData: function(done) {
            $http.get('/data/records.json')
            .success(function(data) { 
                done(data);
            })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

Answers


Don't use a ng-repeat. Find the account having the maximum balance using a function of your controller, and store it in the scope:

function findMaxBalanceAccount() {
    var result = null;
    for (var i = 0; i < $scope.Entries.Records.length; i++) {
        var account = $scope.Entries.Records[i];
        if (result == null || account.Balance > result.Balance) {
            result = account;
        }
    }
    return result;
}

$scope.maxBalanceAccount = findMaxBalanceAccount();

Now you can use it in the template:

{{ maxBalanceAccount.Name }},  {{ maxBalanceAccount.Balance }} 

Note that variables and fields usually start with a lower-case letter in JavaScript.


Need Your Help

Use Service Manager Zend Framework 2

zend-framework zend-framework2 servicemanager

if I have a service manager in the module Category, such as, can I have read from Category in module Application?

Suggested way to backup Google Cloud Storage

google-app-engine google-cloud-storage

I have an appengine application using gcs storing a lot of images and serving them thru blobstore.