Question

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

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

DataController：

$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包装在一个数组中：

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

另外，如果你有自制的脚手架，data.json需要在app/路线。如果它在路线之外，您将获得404。

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

1 个答案: