Javascript Angular JS：使用$http.get（）导入JSON数据-在控制器中工作，在服务中不工作-为什么？

我正在尝试将JSON数据导入angularJS应用程序。我将我的应用程序分为控制器和导入服务，但两者都在不同的文件中。我也在使用bower、grunt和yeoman（这是因为工作原因，我不太习惯这些，可能也有问题。）

奇怪的行为是：

我想用$http.get（）检索JSON数据并解析它——都在一个服务中，这样我就可以将数据对象从那里传递到主控制器，而不必在那里解析它。 奇怪的是，我没有得到任何数据，它是空的或不可读。然后我给出了$http.get（）方法返回的承诺，并在控制器中解决了它。这不是我想要的，但现在它起作用了。。。。但是为什么呢

我想这是一个很小的失误，但我和我的团队成员都找不到。奇怪的是，在没有grunt、yeoman和bower的情况下做了一个小测试应用程序，它成功了

我很感激每一个暗示或想法。。。 雅娜

以下是我在不工作版本中的代码，首先是带控制器的主模块：

/** Main module of the application. */
(function () {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = CategoryFactory.getCategories();
      $scope.subcategories = CategoryFactory.getSubCategories();

    }
  );
})();

/** Main module of the application. */
(function() {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = [];
      $scope.subcategories = [];

      CategoryFactory.getCategories().then(function(response) {
        $scope.categories = response.data;
      });
      CategoryFactory.getSubCategories().then(function(response) {
        $scope.subcategories = response.data;
      });
    }
  );
}
)();

服务部分：

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var categories = [];
      var subcategories = [];

      $http.get("../mockdata/categories.json").then(function (response) {
        categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        subcategories = response.data;
      })
      return {
        getCategories: function(){
          return categories;
        },
        getSubCategories: function(){
          return subcategories;
        }
      }
    }
  );
})();

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http, $q) {

      var categoryURL = "../mockdata/categories.json";
      var subcategoryURL = '../mockdata/subcategories.json';

      function getSubCategories() {
        return $http.get(subcategoryURL);
      }
      function getCategories() {
        return $http.get(categoryURL);
      }
      return {
        getCategories: getCategories,
        getSubCategories: getSubCategories
      }
    }
  );
})();

以下是我的工作版本代码，首先是带控制器的主模块：

/** Main module of the application. */
(function () {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = CategoryFactory.getCategories();
      $scope.subcategories = CategoryFactory.getSubCategories();

    }
  );
})();

/** Main module of the application. */
(function() {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = [];
      $scope.subcategories = [];

      CategoryFactory.getCategories().then(function(response) {
        $scope.categories = response.data;
      });
      CategoryFactory.getSubCategories().then(function(response) {
        $scope.subcategories = response.data;
      });
    }
  );
}
)();

服务部分：

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var categories = [];
      var subcategories = [];

      $http.get("../mockdata/categories.json").then(function (response) {
        categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        subcategories = response.data;
      })
      return {
        getCategories: function(){
          return categories;
        },
        getSubCategories: function(){
          return subcategories;
        }
      }
    }
  );
})();

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http, $q) {

      var categoryURL = "../mockdata/categories.json";
      var subcategoryURL = '../mockdata/subcategories.json';

      function getSubCategories() {
        return $http.get(subcategoryURL);
      }
      function getCategories() {
        return $http.get(categoryURL);
      }
      return {
        getCategories: getCategories,
        getSubCategories: getSubCategories
      }
    }
  );
})();

---

您将数据存储在角度基本体中，这些基本体不会更新。相反，将所有数据存储在一个对象中，它应该可以工作（您还需要更新控制器）

---

默认情况下，$http调用是异步的

所以在您的第一个版本中，当您像

$scope.categories=CategoryFactory.getCategories（）这样编写时
您将获得空类别，因为在您访问类别时，它可能尚未加载响应数据

你的应用程序流程如下-

加载控制器
你打电话给服务部
服务调用$http
您尝试访问类别（但在服务器返回响应之前，数据将不可用）
$http。然后将数据加载到$scope.categories
这会破坏您的引用，因此请循环服务器中的数据，并将其推送到所需的变量中：

  $http.get("../mockdata/categories.json").then(function (response) {
    for(var x = 0; x < response.data.length; x++){
        categories.push(response.data[x]);
    }
  });

$http.get（“../mockdata/categories.json”）。然后（函数（响应）{
对于（var x=0；x
奇怪的是，在一个没有框架的测试版本中，它的工作原理。。。因此，如果我想在服务中封装检索函数，您建议怎么做？添加一些等待函数在我脑海中浮现，但这似乎是相当丑陋的黑客行为…正确-等待函数将是丑陋的。您可以在范围变量上使用$watch来查看数据是否已从服务器到达，并采取相应的措施。但是你的第二个版本是干净的并且是首选的。好吧，也许它足够干净，可以工作，但是函数没有像我希望的那样干净地分开…：-（我会看看$watch是否有帮助，目前还不知道这个函数。谢谢你的建议，我会尝试一下并发布它是否有效！好吧，现在我得到了
错误：$scope.categories是未定义的
——虽然我当然引用了
$scope.categories
，并使用了上面的不起作用的代码作为我的控制器。Oó为什么？我不知道…您使用了
$scope.categories=CategoryFactory.data.categories
？否。当您在服务中返回
data.categories
时，我只使用了
$scope.categories=CategoryFactory.getCategories（）
以准确获取数据对象的category属性。好的……我想尝试一下。但是如何迭代未知对象的属性并用它们填充类别？使用
for（responseData中的var属性）
我只得到了一个不断增加的索引号来提醒
属性。我如何将属性添加到类别中？JSON数据就像一个对象列表，有几个属性…谢谢！这真的很简单，我想我的思维有点受阻。它起了作用！非常好。谢谢！还有一个理解问题…wh当我在控制器中解析承诺时，它是否起作用？代码与我的服务中的代码相同（在更正之前），没有任何循环，但工作正常。你知道为什么吗？只是解析需要几毫秒的时间，或者将其传递给控制器，或者在其上循环足够时间进行解析？但为什么不是呢控制器中的“销毁引用”？因为它与您直接修改附加到范围对象的变量在控制器中的引用相同。在您的服务中，数组没有附加到对象，因此在http post后重置数组时会将其删除。