Не получать данные с помощью Angular JS

Question

Я пытаюсь создать приложение с Angular JS, которое извлекает данные из API Django REST.

У меня есть этот скрипт

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}} 
    ); 
    }); 

И я не получаю ошибок нет, но нет данных либо. Есть, однако, некоторые таблицы на веб-странице, например, если он пытается «поймать» что-то, вот скриншот

UPDATE:

Я пытался поставить этот линия

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

Вместо этого

return $resource('/classrooms/:id/', 

на угловом приложении, и нет никаких данных, но, если я иду к инструментам разработчика по сети -> XHR, я получаю данные JSON

[{"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"}] 

, но, как я сказал, что данные не показано в таблицах в html.

UPDATE 2: "Формат = JSON"

После добавления к URL ресурса, я получаю точное количество строк (в моих данных у меня есть три классных комнаты, так что я получаю три строки в таблице HTML), но в нем нет данных.

UPDATE 3:

Я добавил эту строку для отладки кода

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

и теперь я получаю это, на бревне консоли

Answer 1

Ваш data не находится в c orrect. В итоге у вас не было данных }]. Повторно проверьте ответ сервера.

Я воспроизвел весь сценарий на своей машине, и ваш код работал отлично.

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 возвращает только те данные, которые вы указали при }] добавленных в конце.

ВЫВОД: