如何使用Angular JS獲取JSON

Question

我試圖使我的表充滿數據。 該URL返回json，但我不知道如何在角度調用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，但是如何調用jsonp。

Answer 1

好像您的代碼有幾個問題。

1. 您的jsonp調用url必須具有值為JSON_CALLBACK 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'
});

2. 您應該更改$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

您需要添加它才能發送請求，否則，對於$ Angle，未定義$ http變量（或將其作為依賴項導入）。 是的，就像@pankajparkar和@vishnu所說，您需要在控制器的這一行中進行更改：

$scope.organisatieList = response();

為此：

$scope.organisatieList = response;