如何使用Angular JS獲得JSON

Question

我是一名初學者，所以請裸露我和我的英語。我正試圖讓我的桌子充滿數據。該網址給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，但我如何調用json。感謝您的時間！

Answer 1

似乎有幾個問題與您的代碼。

1. 你jsonp通話網址必須callback參數設置的值JSON_CALLBACK像callback=JSON_CALLBACK &它應該是jsonp類型。

代碼

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

OR

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 

您需要添加這是能夠發送請求，否則對於$ http變量未定義（或導入爲依賴項）。是的，像@pankajparkar和@vishnu說，你需要在你的控制器此行更改：​​

$scope.organisatieList = response(); 

對於這一個：

$scope.organisatieList = response;