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

Question

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

代码的注释部分抛出错误“无法读取未定义的属性 'length'，因为它找不到这两个变量。

有人可以帮我解决这个问题吗？

    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 调用独立

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

当您使用 $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);
                    }
                }
    }
            }
    });

    }
        ]
        );

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

How to access variables in angularjs $http service

javascript

angularjs

angularjs-service

angularjs-scope