如何访问angularjs $ http服务中的变量

Question

我有我的控制器，它使用$ http服务从2个json文件中提取数据。 这些数据存储在$ scope.name和$ scope.application之类的$ scope变量中。 但我无法解析同一控制器内的这两个变量。

代码的注释部分抛出我的错误“无法读取属性‘长度’的不确定，因为它无法找到这两个变量。

能有人帮我解决这个问题？

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); 
       } 
      } 

     }*/ 
} 
    ] 
    ); 

Answer 1

我会建议的$q.all()使用情况，以解决多个承诺，并保持API调用独立

将多个承诺组合成单个承诺，当所有输入承诺都解决时解决。

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); 
       } 
      } 
     } 
    }); 
}]); 

---

当您使用$http，其中异步本质上你所得到的错误。

对于最简单的解决方案，请使用以下内容。在这里，我们正在等待异步请求完成，然后继续进行所需的操作。

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); 
        } 
       } 
      } 
     }); 
    }); 
    /**/ 
}]); 

Answer 2

您可以使用$watch或$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); 
        } 
       } 
    } 
      } 
    }); 

    } 
     ] 
     );