Question

我想让我的桌子充满数据。网址给了json，但我不知道如何以角度调用json。

这是我的服务.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。

Answer 1

好像您的代码存在一些问题。

您的jsonp来电网址必须包含值为callback的{{1}} JSON_CALLBACK参数，例如callback=JSON_CALLBACK＆amp;它的类型应为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; });

Answer 2

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

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

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

$scope.organisatieList = response();

对于这个：

$scope.organisatieList = response;

如何使用Angular JS获取JSON

2 个答案: