Setting $scope property value through iteration over array

Question

I'm trying to build out my first Angular app and having an issue with this:

(function() {

var ItemController = function($scope, $routeParams, $log, foodFactory) {
    var foodId = $routeParams.foodId;
    $scope.food = [];
    $scope.item;

    function init() {
        foodFactory.getFoods()
            .success(function(foods) {
                $scope.food = foods;
            })
            .error(function(data, status, headers, config) {
               //handle error
            });
    }

    init();

    for (var i = 0, len = $scope.food.length; i < len; i++) {
        if (foodId == $scope.food[i].id) {
            $scope.item = $scope.food[i];
        }
    }

};
angular.module('paleoApp')
    .controller('ItemController', ['$scope', '$routeParams', '$log', 'foodFactory', ItemController]);

})();

The code properly sets $scope.food to the array of objects pulled from a JSON file by foodFactory, and the view also properly displays the array when {{ food }} is used. In order to get the proper object within the array, I tried looping through $scope.food to find the object with property 'id' that matches foodId in order to assign that object to $scope.item. However, the view won't display anything for {{ item }}.

What am I doing wrong?

Thanks.

wjohnsto · Accepted Answer · 2014-10-10 01:22:12Z

2

In the init method, the getFoods() call appears to be asynchronous, but you are iterating through $scope.food prior to the call finishing. You should be able to do something like the following:

var ItemController = function($scope, $routeParams, $log, foodFactory) {
    var foodId = $routeParams.foodId;
    $scope.food = [];
    $scope.item;

    function init() {
        return foodFactory.getFoods()
            .success(function(foods) {
                $scope.food = foods;
            })
            .error(function(data, status, headers, config) {
               //handle error
            });
    }

    init().then(function() {
        for (var i = 0, len = $scope.food.length; i < len; i++) {
            if (foodId == $scope.food[i].id) {
                $scope.item = $scope.food[i];
            }
        }
    });
};

What you have here is the init method returns a promise. When you call init().then you wait until $scope.food = foods; has executed before finding the food item in the list.

answered Oct 10, 2014 at 1:22

wjohnsto

4,5032 gold badges16 silver badges20 bronze badges

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

2 Comments

jfsk22 Over a year ago

Thanks! Makes sense to me. Unfortunately, it doesn't allow me to use .then() like that. I did make a small work-around using $timeout which got me the results I wanted, but it feels like a cheap hack and I want to figure out how to do this properly.

wjohnsto Over a year ago

I'm assuming you're using Angular's $http service to fetch the JSON file. Note that I changed the init method to return a promise (previously it was not doing so). A $http call will return a promise with success/error methods, The success/error methods will both return promises of their own for chaining. In this way you can return the promise from the call to .error, and chain it like in my example above.

Collectives™ on Stack Overflow

Setting $scope property value through iteration over array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related