如何使用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;