Angular JSでデータを取得しない

Question

Django REST APIからデータを取得するAngular JSでアプリケーションを構築しようとしています。

私はこのスクリプト

var userListApp = angular.module('userListApp', ['ngResource']); 

userListApp.factory('Classroom', function($resource) { 
     return $resource('/classrooms/:id/', 
     {'query': {method: 'GET', isArray:false}} 
    ); 
    }); 

userListApp.controller('UsersController', function($scope, Classroom) { 
    Classroom.query(function(data) { 
    $scope.classrooms = data; 
    }); 
}); 

を持っており、これはHTML

<div ng-app="userListApp"> 
    <div ng-controller="UsersController"> 
     <table class="table table-striped"> 
      <thead> 
       <tr> 
        <th>Classroom</th> 
        <th>School</th> 
        <th>Academic year</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="classroom in classrooms"> 
        <td>{{classroom.classroom}}</td> 
        <td>{{classroom.school}}</td> 
        <td>{{classroom.academic_year}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

あるしかし、私は、コンソールに

Error: $resource:badcfg
Response does not match configured parameter
Error in resource configuration for action query . Expected response to contain an array but got an object (Request: GET /classrooms)

（from the error reference page of Angular JS）

をこのエラーを取得しています

私はここにStackOverflow上のいくつかの回答を見て、そしてthis oneに来た、と私は彼らが

userListApp.factory('Classroom', function($resource) { 
     return $resource('/classrooms/:id/', 
     {method: 'classrooms', id: '*'}, 
     {'query': {method: 'GET', isArray:false}} 
    ); 
    }); 

そして、私はどちらかのエラー、ないデータを取得していないよ言うことを行うことを試みました。

私はこれを入れてみました：それは何か「キャッチ」にしようとしているかのようにWebページ上のいくつかのテーブルは、ここではUPDATEが01​​

スクリーンショット

です、しかし、があります代わりに、この

のライン

return $resource('/classrooms/?format=json', 

角アプリの

、およびデータはありません、しかし、私は、ネットワーク上の開発ツールに行けば - > XHR私はデータがないことを、言ったように、私は、

[{"school":{"id":1,"school_name":"IPSIA F. Lampertico","address":"Viale Giangiorgio Trissino, 30","city":"Vicenza"},"academic_year":"2015/2016","classroom":"1^A","floor":0,"students":[{"classroom":1,"first_name":"Stefano","last_name":"Rossi","gender":"M","birthday":"1998-06-22"},{"classroom":1,"first_name":"Luca","last_name":"Possanzini","gender":"M","birthday":"1999-11-22"}] 

JSONデータを取得しますが、 htmlの表に示されています。

UPDATE 2：「？フォーマット= JSONを "」

リソースURLに追加した後、私は私のデータに私は3つの教室を持っている（行の正確な量を取得するので、私は3行を取得HTML表の中に）、データは入っていません。

UPDATE 3：

私はコンソールログ

Answer 1

に、

userListApp.controller('UsersController', function($scope, Classroom) { 
    Classroom.query(function(data) { 
    $scope.classrooms = data; 
    console.log(data); <--- NEW LINE FOR THE DEBUG 
    }); 
}); 

、今は私がこれを取得コードをデバッグするために、この行を追加しました

あなたのdataはcにありません正しい形式。投稿したデータの最後に}]がありません。サーバーの応答を再確認してください。

私は自分のマシンでシナリオ全体を複製し、コードは正常に動作しました。

HTML：あなたと同じです。

スクリプト：

var userListApp = angular.module('userListApp', ['ngResource']); 

userListApp.factory('Classroom', function($resource) { 
     return $resource('http://localhost:9000/classrooms/1', //changed this line only. 
     {'query': {method: 'GET', isArray:false}} 
    ); 
    }); 

userListApp.controller('UsersController', function($scope, Classroom) { 
    Classroom.query(function(data) { 
    $scope.classrooms = data; 
    }); 
}); 

http://localhost:9000/classrooms/1戻りますが、末尾に追加}]で指定されたデータだけ。

OUTPUT：あなたのテーブルに多数の行を持っているので