logo标签列表

AngularJS: 如何将JSON数据加载到作用域变量中

javascriptjsonangularjs
12
我正在创建一个个人网站，希望能够在不必操作 HTML 的情况下不断更新内容。我试着通过加载和更新一个 JSON 文件来实现这一目标。但是目前，我无法将 JSON 数据加载到一个 scope 变量中。 < p>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"},
]

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

我做错了什么？

编辑：我将相同的代码放在plunker上，它可以正常工作。 它只是在我的本地机器上无法工作。

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

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

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

                 });
    });

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

5

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

所以这个：

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

应该是这样的：
.success(function(data) {
    $scope.contents = data[0];
})

此外，您应该检查data[0]以确保它是json格式的，如果不符合规范，您可能需要调用parseJSON(data[0])对其进行解析。
1
抱歉，它不起作用。我确信我的问题与此教程 https://docs.angularjs.org/tutorial/step_05 完全相同。但仍然无法正常工作。 - Divyanth Jayaraj
1
@emilySmitley 哥们，你刚才解释的概念真是太棒了！我一直在想为什么数据没有保存起来。非常感谢你！"非常感谢你！" :-) - Prasad
@PRASAD 很高兴我能帮到你！ - heckascript
兄弟，你知道如何使用Momentjs进行时间减法吗？ - Prasad
你应该在Stack Overflow上提出这个问题，@PRASAD。 - heckascript
2
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类型。它起作用了。

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Prasad
0

将您的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"}
 ]
}
1
不错，但是你在HTML中怎么调用它？ - raduken
0

我不知道你是否已经找到解决方案了。 如果没有，请尝试这个方法。 当使用本地主机服务器时，服务器无法定位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"}];
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接