Question

我正在创建一个个人网站，我可以在不必操纵HTML的情况下不断更新内容。我试图通过简单地加载和更新JSON文件来实现这一目标。但是现在，我无法将JSON数据加载到scope变量上。

HTML 的

<!doctype html>

<html>
    <head>
        <script src="angular.min.js" type="text/javascript"></script>
        <script src="maincontroller.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-app="mainApp" ng-controller="mainController">
            <div id="content">
                <div ng-repeat="content in contents">
                    <h2>{{content.heading}}</h2>
                    <p>{{content.description}}</h2>
                </div>
            </div>
        </div>
    </body>
</html>

maincontroller.js

var myapp = angular.module('mainApp', []);
myapp.controller('mainController',function($scope,$http){

    $scope.contents = null;
    $http.get('mainContent.json')
        .success(function(data) {
            $scope.contents=data;
        })
        .error(function(data,status,error,config){
            $scope.contents = [{heading:"Error",description:"Could not load json   data"}];
        });

    //$scope.contents = [{heading:"Content heading", description:"The actual content"}];
    //Just a placeholder. All web content will be in this format
});

这就是JSON文件的样子

[
    {"heading":"MyHeading","description":"myDescription"},
]

我实际上尝试按照here给出的解决方案，但它没有加载存储在同一文件夹中的JSON文件。我得到的输出来自错误处理函数，正如所提到的那样Error: Cannot load JSON data。

我做错了什么？

编辑：我在plunker上添加了相同的代码，它运行正常。它只是不在我的本地机器上工作。

Answer 1

修改您的方法使用此方法和检查输出。

var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http.get('urlpath'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});

或我看到的另一个好习惯

使用工厂服务方法： -

angular.module('mainApp').factory('Myservice', function($http){
    return {
        getdata: function(){
              return $http.get('url'); // You Have to give Correct Url either Local path or api etc 

        }
    };
});

将以上服务注入Controller

控制器： -

angular.module('mainApp',[]).controller('mainController',function($scope,Myservice){
        $scope.content = null;
         Myservice.getdata().success(function (data){
                       alert('Success');
                   $scope.content=data[0]; // as per  emilySmitley Answer which is Working Good

                 });
    });

让我知道您是否有任何问题。祝你好运

Answer 2

您的json文件有一个数组，其中数组中的第一个也是唯一一个元素是json对象。当.success()触发，并且数据被传递到lambda函数时，数据是一个数组，而不仅仅是json。您所要做的就是访问数组的第0个元素。

所以这个：

.success(function(data) {
    $scope.contents = data;
})

应该是这样的：

.success(function(data) {
    $scope.contents = data[0];
})

此外，您应该检查data[0]以确保它是json，如果它没有验证，您应该在其上调用parseJSON(data[0])。

Answer 3

var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http({method: 'GET', url: 'mainContent.json'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});

在Web Server中发布并为.json添加了Mime类型。它奏效了。

Answer 4

更改mainController.js和JSON文件，如下所示。在这里我使用wamp服务器作为我的本地服务器。

var myapp = angular.module('mainApp', []);
myapp.controller('mainController', function($scope, $http) {
  $http.get('http://localhost/stackoverflow/angular/test1/database.json').success (function(data) {
    $scope.contents = data.records;
  })
});

JSON文件：

{
 "records":
 [
    {"heading":"MyHeading","description":"myDescription"}
 ]
}

AngularJS：如何将JSON数据加载到范围变量中

4 个答案: