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.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.