current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I have my controller and it fetches data from 2 json files using $http service. This data is stored inside $scope variables like $scope.name and $scope.application. But I am unable to parse over both these variables inside the same controller.

The commented portion of the code throws me error "Cannot read property 'length' of undefined as it cannot find these two variables.

Can some one please help me solve this?

    var phonecatControllers = angular.module('phonecatControllers', []);

    phonecatControllers.controller('PhoneListCtrl',['$scope', '$http','$log', function ($scope, $http,$log) 
{
    $http.get('server/user/details.json').success
    (function(data) 
      {
        $scope.users = data;
        /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
        for (var i = 0; i < $scope.users.length; i++) 
        {
            $log.info($scope.users[i].name);
        }
      }
    );



    $http.get('server/user/software/application.json').success
    (function(data) 
      {
        $scope.applications = data;
        /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
        for (var i = 0; i < $scope.applications.length; i++) 
        {
            $log.info($scope.applications[i].application);
        }
      }
    );


    /*for (var i = 0; i < $scope.users.length; i++) 
        {
            for (var j = 0; j < $scope.applications.length; j++) 
            {
                if($scope.users[i].application === $scope.applications[j].application)
                {
                    $log.info($scope.users[i].application );
                    $log.info($scope.applications[i].application);
                }
            }

        }*/
}
    ]
    );
share|improve this question
up vote 0 down vote accepted

I would recommend the usage of $q.all() to resolve multiple promises and keep the API call independent

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', '$log', '$q', function($scope, $http, $log, $q) {
    var userDetailPromise = $http.get('server/user/details.json').success(function(data) {
        $scope.users = data;
        /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
        for (var i = 0; i < $scope.users.length; i++) {
            $log.info($scope.users[i].name);
        }
    });
    //Read application
    var applicationPromise = $http.get('server/user/software/application.json').success(function(data) {
        $scope.applications = data;
        /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
        for (var i = 0; i < $scope.applications.length; i++) {
            $log.info($scope.applications[i].application);
        }
    });

    $q.all([
        userDetailPromise,
        applicationPromise
    ]).then(function() {
        //Perform desired when both promises are resolved
        for (var i = 0; i < $scope.users.length; i++) {
            for (var j = 0; j < $scope.applications.length; j++) {
                if ($scope.users[i].application === $scope.applications[j].application) {
                    $log.info($scope.users[i].application);
                    $log.info($scope.applications[i].application);
                }
            }
        }
    });
}]);

As you are using $http, which async in nature you are getting the error.

For, simplest solution use the following. Here we are waiting for both the async request to complete and then proceed with desired operation.

var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', '$log', function($scope, $http, $log) {
    $http.get('server/user/details.json').success(function(data) {
        $scope.users = data;
        /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
        for (var i = 0; i < $scope.users.length; i++) {
            $log.info($scope.users[i].name);
        }


        //Read application
        $http.get('server/user/software/application.json').success(function(data) {
            $scope.applications = data;
            /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
            for (var i = 0; i < $scope.applications.length; i++) {
                $log.info($scope.applications[i].application);
            }


            //Perform desired
            for (var i = 0; i < $scope.users.length; i++) {
                for (var j = 0; j < $scope.applications.length; j++) {
                    if ($scope.users[i].application === $scope.applications[j].application) {
                        $log.info($scope.users[i].application);
                        $log.info($scope.applications[i].application);
                    }
                }
            }
        });
    });
    /**/
}]);
share|improve this answer
    
Ok .. Thanks.. Let me check... – JMD yesterday
    
Thanks a lot Satpal.. It worked!!! I shall accept this answer .. If possible can you explain where the glitch was please.... – JMD yesterday
    
And the thought process behind your answer basically... – JMD yesterday
    
@JMD, Here we are waiting for both the async request to complete and then proceed with desired operation. – Satpal yesterday
    
As both calls are independent, I don't think its good to wait for first call to finish then only call the other one. Let them call independently and watch the response and do the manipulation later. – vpsingh016 yesterday
up vote 0 down vote

You can use $watch or $watchCollection 

 var phonecatControllers = angular.module('phonecatControllers', []);

   phonecatControllers.controller('PhoneListCtrl',['$scope', '$http','$log', function ($scope, $http,$log) 
    {
        $http.get('server/user/details.json').success
        (function(data) 
          {
            $scope.users = data;
            /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
            for (var i = 0; i < $scope.users.length; i++) 
            {
                $log.info($scope.users[i].name);
            }
          }
        );



        $http.get('server/user/software/application.json').success
        (function(data) 
          {
            $scope.applications = data;
            /*$scope.users = data.splice(0, n);*/ //Restricts to 'n' users
            for (var i = 0; i < $scope.applications.length; i++) 
            {
                $log.info($scope.applications[i].application);
            }
          }
        );

    $scope.$watchCollection("[users, applications]", function(newVal, oldVal) { 
    if (newVal !== oldVal) {
        for (var i = 0; i < newVal[0].length; i++) 
            {
                for (var j = 0; j < newVal[1].length; j++) 
                {
                    if(newVal[0][i].application === newVal[1][j].application)
                    {
                        $log.info(newVal[0][i].application );
                        $log.info(newVal[1][i].application);
                    }
                }
    }
            }
    });

    }
        ]
        );
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.