angular js - unable to access objects pushed to array in controller

Question

Here is my controller

angular.module("app").controller('myController', ['$scope', '$filter','$rootScope','contentService','$location','$anchorScroll', function ($scope, $filter,$rootScope,contentService,$location,$anchorScroll) {

$scope.searchContents = [] ;

var filterList = function (list, keyword) {
    return $filter('filter')(list, keyword);
};

var addToSearchContents = function (list,type){
    _.each(list,function(item){
        item.type = type;
        $scope.searchContents.push(item);
    });     
};

$scope.init = function(){
    var str = $location.absUrl();
    $scope.searchKeyword = str.substring(str.indexOf("=") + 1,str.length);

    !_.isEmpty($scope.searchKeyword)
    {
        // get all songs
        contentService.getAllSongs().then(function (result) {
            var filteredSongs = filterList(result.data.songs, $scope.searchKeyword);
            addToSearchContents(filteredSongs,"song");
        });

        // get all people
        contentService.getAllPeople().then(function (result) {
            var filteredPeople = filterList(result.data.people, $scope.searchKeyword);
            addToSearchContents(filteredPeople,"people");
        });           

        _.each($scope.searchContents,function(item){

             alert("item -> "+item.type);
        });
    }
};

$scope.init();

}]);

Items(objects) are added to the variable $scope.searchContents in addToSearchContents but if i try to access/iterate after all objects that are pushed to $scope.searchContents with _.each it seems to null. But i can access all the contents in HTML page with ng-repeat but not in controller. I am puzzled, am i missing something.

Seems that you're missing a if( before testing !_.isEmpty($scope.searchKeyword). An other thing : use angular built-in functions instead of underscore. — mguimard
– mguimard, Commented Aug 25, 2015 at 12:27
@ mguimard - thanks for pointing out if, and i have tried angular inbuilt function instead of underscore js...still not able to iterate over contents added to array inside controller — Amit
– Amit, Commented Aug 25, 2015 at 12:46
contentService.getAllSongs() and contentService.getAllPeople() seems to be asynchronous stuff. You're iterating the $scope.searchContents whereas it's not filled yet. — mguimard
– mguimard, Commented Aug 25, 2015 at 12:49

Joy · Accepted Answer · 2015-08-25 14:42:28Z

You got the error because when you call _.each($scope.searchContents..., the data has not arrived from the async calls. addToSearchContents is not executed yet.

Use $q.all, which combines all promises into on giant one. And then do something after all promises are resolved.

Note: remember to inject the service $q to your controller.

$q.all([
    contentService.getAllSongs(),
    contentService.getAllPeople()
]).then(function (result) { 
    // `result` is an array containing the results from the promises.

    var filteredSongs = filterList(result[0].data.songs, $scope.searchKeyword);
    addToSearchContents(filteredSongs,"song");

    var filteredPeople = filterList(result[1].data.people, $scope.searchKeyword);
    addToSearchContents(filteredPeople,"people");

    _.each($scope.searchContents,function(item){
        alert("item -> "+item.type);
    });
});

I do not have your coding context, so a similar JSFiddle is created for you. It illustrates the same idea.

Joy · Accepted Answer · 2015-08-25 19:30:19Z

1

Yet another variant, also with $q.all:

$q.all([
    // get all songs
    contentService.getAllSongs().then(function (result) {
        var filteredSongs = filterList(result.data.songs, $scope.searchKeyword);
        addToSearchContents(filteredSongs,"song");
    }),

    // get all people
    contentService.getAllPeople().then(function (result) {
        var filteredPeople = filterList(result.data.people, $scope.searchKeyword);
        addToSearchContents(filteredPeople,"people");
    })]).then(function(){         
        // here all items already added so we can iterate it
        _.each($scope.searchContents,function(item){
            alert("item -> "+item.type);
        });
    });

edited Aug 25, 2015 at 19:30

Joy

9,60011 gold badges50 silver badges99 bronze badges

answered Aug 25, 2015 at 15:13

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

3 Comments

Joy Over a year ago

When the _.each... is called, maybe the getAllSongs() is not resolved yet.

Grundy Over a year ago

@Joy, nope, _.each called after all promisses in $q.all resolved, so getAllSongs would be resolved, and then function also would be resolved. I you see a bit more, you can see that you have the same code, but i put then functions inside $q.all :-)

Amit Over a year ago

@Grundy nd @ Joy - Yes due to async call to get json data, contents weren't not filled in the array until its resolved...thanks alot..:)

Collectives™ on Stack Overflow

angular js - unable to access objects pushed to array in controller

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related