如何使用 Angular JS 获取 JSON答案

【问题标题】：How to get JSON with Angular JS如何使用 Angular JS 获取 JSON
【发布时间】：2015-05-14 13:20:20
【问题描述】：

我正在尝试让我的表格充满数据。 url返回json，但是不知道怎么用angular调用json。

这是我的 services.js：

angular.module('OrganisatieApp.services', [])
.factory('organisatieAPIservice', function($resource) {

    var organisatieAPIservice = [];
organisatieAPIservice.getOrganisaties = function(){
    return $http({
        method: 'JSON_CALLBACK',
        url: 'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/Organisaties'
    });

}
        return organisatieAPIservice;
        })

controller.js：

      angular.module('OrganisatieApp.controllers', []).
    controller('organisatieController',function($scope, organisatieAPIservice) {

        $scope.organisatieList = [];

            organisatieAPIservice.getOrganisaties().success(function (response) {
                //Assign response in Callback
                $scope.organisatieList = response();
            });
});

app.js：

angular.module('OrganisatieApp', [
    'OrganisatieApp.controllers',
    'OrganisatieApp.services' ]);

我的html div：

    <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Organisatie naam</th>
                        <th>Organisatie plaats</th>
                        <th>Organisatie Curriculum</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="organisatie in organisatieList">
                        <td>{{$index + 1}}</td>
                        <td>
                            <img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
                            {{organisatie.Organisatie.orgNaam}}&nbsp;{{organisatie.Organisatie.orgVolledig}}
                        </td>
                        <td>{{organisatie.Constructors[0].provincie}}</td>
                        <td>{{organisatie.curriculum}}</td>
                    </tr>
                    </tbody>
                </table>
                <ng-view></ng-view>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="page-header">
            <h1>Opleidingsprofiel</h1>

        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <ul class="nav nav-pills" role="tablist">
                        <li role="presentation"><a href="#">Aantal Organisaties<span class="badge">3</span></a></li>
                    </ul>
                </h3>
            </div>



            <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Organisatie naam</th>
                        <th>Organisatie plaats</th>
                        <th>Organisatie Curriculum</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="organisatie in organisatieList">
                        <td>{{$index + 1}}</td>
                        <td>
                            <img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
                            {{organisatie.Organisatie.orgNaam}}&nbsp;{{organisatie.Organisatie.orgVolledig}}
                        </td>
                        <td>{{organisatie.Constructors[0].provincie}}</td>
                        <td>{{organisatie.curriculum}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

我做错了什么？我知道我正在尝试调用 jsonp，但我该如何调用 json。

【问题讨论】：

将 $scope.organisatieList = response() 更改为响应。确保organisatie.Organisatie.orgNaam 在响应中。
使用控制台检查错误。由于 $http 从未被注入，因为当您尝试使用它时，依赖项应该会抛出错误......排除故障的重要线索

标签： javascript jquery json angularjs

【解决方案1】：

您的代码似乎有几个问题。

您的jsonp 调用网址必须有callback 参数，其值为JSON_CALLBACK，例如callback=JSON_CALLBACK，并且其类型应为jsonp。

代码

return $http.jsonp({'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/Organisaties?callback=JSON_CALLBACK'});

或

return $http({
    method: 'jsonp',
    url: 'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/Organisaties?callback=JSON_CALLBACK'
});

您应该将$scope.organisatieList = response(); 更改为$scope.organisatieList = response;，因为响应包含数据。

organisatieAPIservice.getOrganisaties().success(function (response) {
    //Assign response in Callback
    $scope.organisatieList = response;
});

【讨论】：

【解决方案2】：

在这一行中，只需添加“$http”作为服务的依赖项，如下所示：

angular.module('OrganisatieApp.services', [])
.factory('organisatieAPIservice', function($resource,$http) {
    //your code here

您需要添加它才能发送请求，否则对于 Angular，$http 变量未定义（或作为依赖项导入）。是的，就像@pankajparkar 和@vishnu 说的那样，您需要在控制器中更改这一行：

$scope.organisatieList = response();

对于这个：

$scope.organisatieList = response;

【讨论】：