Angularjs undefined err scope variable

Question

Hi folks I'm having some difficulty with angularjs. I have lterally spent the whole day today trying to figure this out! I am new to this and really stuck so hoping someone can help. I'm getting an error 'Cannot read property 'length' of undefined'.. my program has an array of objects '$scope.products' taken from a .json file.. I filter this array to show only those products with category:'special offers'..

$scope.specialOffers = $filter('filter')($scope.products,{category:"Special 
Offers"}, true);

then take the length of this new array and pass it to my randomInt function thereby creating a random integer between 0 and the array length.. but for some reason '$scope.specialOffers' is showing as undefined.. here is the full controller code:

app.controller('ProductsController', ['$scope','$filter', 'productFactory', 
'$location', '$routeParams', 
function ($scope, $filter, productFactory, $location, $routeParams) {

$scope.path;
$scope.category;
$scope.products;
$scope.rand;
$scope.specialOffers;
$scope.id = $routeParams.id;

specifyCategory();
getProducts();

$scope.specialOffers = $filter('filter')($scope.products,{category:"Special Offers"}, true);

$scope.rand = randomInt($scope.specialOffers.length, 0);

function specifyCategory() {
    $scope.path = $location.path();
    if ($scope.path == "/products/woodentoys") {
        $scope.category = "Wooden Toys"
    } else if ($scope.path == "/products/woodenaccessories") {
        $scope.category = "Wooden Accessories"
    } else if ($scope.path == "/products/specialoffers"){
        $scope.category = "Special Offers"
    }
}

function getProducts() {
    productFactory.getProducts()
        .then(function (response) {
            $scope.products = response.data;

        }, function (error) {
            $scope.status = 'unable to load product data ' + error.message;
        });
}

function randomInt(max,min){
    max++;
    return Math.floor((Math.random())*(max-min))+min;
}

}]);

This is my first question on stack overflow so your patience is appreciated Many thanks in advance!

Answer 1

Without seeing the actual error message, my first guess is that $scope.products is not being set before it is being filtered on. It appears getProducts is returning an asynchronous promise:

function getProducts() {
    productFactory.getProducts()
        .then(function (response) {
           $scope.products = response.data;

        }, function (error) {
           $scope.status = 'unable to load product data ' + error.message;
    });
}

If you haven't tried already, move your accessing of this data within the anonymous callback function.

function getProducts() {
    productFactory.getProducts()
        .then(function (response) {
            $scope.products = response.data;
            $scope.specialOffers = $filter('filter')($scope.products, {category:"Special Offers"}, true);
            $scope.rand = randomInt($scope.specialOffers.length, 0);
        }, function (error) {
            $scope.status = 'unable to load product data ' + error.message;
        });
}

Answer 2

This is happening because your request to get the products is taking some time, in the mean while you are trying to access $scope.products whilst the request hadn't finished yet which result in showing as undefined

Try applying your filter in the callback of your request or look into using $watch