如何使用 AngularJS 从 Json 中检索数据？

Question

我最近尝试使用 AngularJS 从 JSON 文件中检索数据。但是我不知道该怎么做；我尝试过这样做，但它不起作用，有人可以告诉我哪里出错了吗？

<div ng-repeat="stuff in otherStuff">
  <p>Title: {{stuff.name}}</p>
  <p>Url: {{stuff.url}}</p>
</div>

数据控制器：

$scope.otherStuff = {};
jsonFactory.getOtherStuff()
  .then(function (response) {
    $scope.otherStuff = response.data.components;
  }, function (error) {
    console.error(error);
  });

jsonFactory：

angular.module('generatorMeanstackApp')
  .factory('jsonFactory', function ($q, $http) {
    return {
      getOtherStuff: function () {
        var deferred = $q.defer(),
          httpPromise = $http.get('data.json');

        httpPromise.then(function (response) {
          deferred.resolve(response);
        }, function (error) {
          console.error(error);
        });

        return deferred.promise;
      }
    };
  });

我的 JSON 数据示例：

{
  "name": "Blogs",
  "url": "blogs.my-media-website.com/*",
  "dependsOn": ["Wordpress MU"],
  "technos": ["PHP", "Wordpress"],
  "host": { "Amazon": ["?"] }
},

Answer 1

在您的控制器中，对数据的引用（通过服务）嵌套得太深，应该是：

$scope.otherStuff = response.data;

代替：

$scope.otherStuff = response.data.components;

您可以将 JSON 包装在一个数组中：

[
  {...},
  {...},
  {...}
]

另外，如果您使用 yeoman 搭建脚手架，data.json 需要在 app/ 路线中。如果它在路线之外，您将收到 404。