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

【问题标题】：AngularJS: How to load JSON data onto a scope variableAngularJS：如何将 JSON 数据加载到范围变量中
【发布时间】：2014-07-22 00:05:46
【问题描述】：

我正在创建一个个人网站，我可以在其中不断更新内容，而无需操纵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 上，它工作正常。它只是无法在我的本地机器上运行。

【问题讨论】：

尝试删除结尾的逗号。确保 JSON 验证 @jsonlint.com
出于安全考虑，大多数浏览器会阻止对文件系统的 AJAX 请求，这可能会导致此错误...您是在本地服务器上运行代码，还是直接在浏览器中打开 HTML 文件?如果您还没有设置一个简单的服务器，则需要设置。

标签： javascript json angularjs

【解决方案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 

        }
    };
});

将上述服务注入控制器

控制器：-

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

                 });
    });

如果您有任何问题，请告诉我。祝你好运

【讨论】：

【解决方案2】：

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

所以这个：

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

应该是这样的：

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

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

【讨论】：

抱歉，这不起作用。我确定我的问题与本教程docs.angularjs.org/tutorial/step_05 中的问题完全相同。还是不行。
@emilySmitley 伙计，您解释的上述概念非常好.. 我一直想知道为什么它不保存数据。 “非常感谢你”。 “非常感谢你”:-)
@PRASAD 很高兴我能帮上忙！
哥们，你知道 Momentjs 的时间减法吗？
您应该将其作为堆栈溢出问题提出@PRASAD

【解决方案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 服务器中发布并为 .json 添加了 Mime 类型。它奏效了。

【讨论】：

当你注入 $http 服务时，使用 '$http.get' 是直接和简单的。我回答了看看，让我知道你的问题

【解决方案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"}
 ]
}

【讨论】：

很好，但是你如何在 html 上调用它？

【解决方案5】：

我不知道您是否仍然能够解决问题。如果没有，试试这个。使用 localhost 服务器时，服务器无法找到 json 文件。要解决这个问题，只需将您的文件重命名为 mainContent.txt，除此之外，您的代码是完美的。但请记住，这仅适用于开发阶段，一旦您计划实时部署站点，请改回 .json 文件。

更新了 $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"}];
    });

【讨论】：