Calling functions within Angular for multiple JSON objects

Question

I am trying to get an Angular controller to consume some JSON, as below and make a call to the "userService" which has a function called "calculateAge". This function will do a diff between the date provided, and the individual JSON objects dateOfBirth to return an age.

I know this might not be the best way of achieving this, this is just an illustrative example.

What I am having difficulties with is calling the userService.calculateAge and getting it to populate an "age" value on each JSON object. I ideally want the value the function returns each time to do this, so that I can better understand how functions can be called within Angular.

My gut instinct is that I am nearly there, and perhaps need to use a for-each loop or similar, however my Angular skills consist of about 2 days learning!

Sample data:

[{
   "firstName":"Bob", "lastName":"Smith", "dateOfBirth":"14-12-1988",
   "email":"BSmith", "mobileNumber":null, "landLineNumber":null,
   "isAdmin":false, "isModerator":false, "isEnabled":false, "isActivated":false
 }, {
   "firstName":"Jo", "lastName":"Smith", "dateOfBirth":"15-03-1990",
   "email":"Smithy", "mobileNumber":null, "landLineNumber":null,
   "isAdmin":false, "isModerator":false, "isEnabled":false, "isActivated":false
}]

My AngularJS controller and service

angular.module("UserApp", [])
.service('userService', function () {
    return {
        calculateAge: function (dateOfBirth) {

            return "23"; //dummy age value here
        }
    };
})
.controller("listUsersController", ['$scope', '$http', 'userService', function ($scope, $http, userService) {
    $http.get("/user/")

        .success(function (data, status, headers, config) {
            $scope.users = data;

            var age = userService.calculateAge($scope.users.dateOfBirth);
            $scope.users.age = age;


        })
        .error(function (data, status, headers, config) {
            // log error
        });
}] ...

Could you post the response from your API? IE, what's in data? Do you maybe mean to set $scope.users[x].age instead of $scope.users.age? — mz3, Jan 09 '15 at 17:05
I would normally post it through my API, however I was trying to find an example scenario - for something slightly different. :) — amelja, Jan 09 '15 at 17:13

score 1 · Accepted Answer · answered Jan 09 '15 at 17:04

1

This doesn't really have anything specifically to do with Angular.

You want to do a loop after you get your data back to send each user to your service. That way you can add the new properties as you loop through them the first time.

    .success(function (data, status, headers, config) {
        $scope.users = data;

        for (var i = $scope.users.length - 1; i >= 0; i--) {
            $scope.users[i].age = userService.calculateAge($scope.users[i].dateOfBirth);
        };

    })

answered Jan 09 '15 at 17:04

Antiga

2,264
1
20
28

1

Thanks, that worked perfectly. Your right, in that it isn't really Angular specific, and perhaps is better as a JS question. :) – amelja Jan 09 '15 at 17:12
Interesting loop method. – mz3 Jan 09 '15 at 17:18
@emzy http://stackoverflow.com/questions/1340589/javascript-are-loops-really-faster-in-reverse. Minimal, but something. It's also Sublime's default `improved native loop` when I am typing code quickly, so it usually wins. – Antiga Jan 09 '15 at 17:20

Calling functions within Angular for multiple JSON objects

1 Answers1