Not fetching data with Angular JS - angularjs

Question

I'm trying to build an app with Angular JS that fetches data from a Django REST API.
I have this script
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;
});
});
and this is the 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>
But I'm getting this error in the console
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)
I was looking at some answers here on stackoverflow, and came to this one, and I tried to do what they say
userListApp.factory('Classroom', function($resource) {
return $resource('/classrooms/:id/',
{method: 'classrooms', id: '*'},
{'query': {method: 'GET', isArray:false}}
);
});
And I'm getting no error, but no data either. There are, however, some tables on the webpage, like if it's trying to "catch" something, here's a screenshot
UPDATE:
I've tried to put this line
return $resource('/classrooms/?format=json',
Instead of this
return $resource('/classrooms/:id/',
on the Angular app, and there's no data, but, if I go to developer tools on Network -> XHR, I get the json data
[{"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"}]
but, as I said, that data is not shown on the tables in the html.
UPDATE 2:
After adding "?format=json'" to the resource url, I get the exact amount of rows (in my data I have three classrooms, so I get three rows in the HTML table), but no data in it.
UPDATE 3:
I've added this line to debug the code
userListApp.controller('UsersController', function($scope, Classroom) {
Classroom.query(function(data) {
$scope.classrooms = data;
console.log(data); <--- NEW LINE FOR THE DEBUG
});
});
and now I get this, on the console log

Answer 1

Your data is not in the correct format. The data you posted has missing }] in the end. Recheck your server response.
I replicated the whole scenario on my machine and your code worked perfectly fine.
HTML: Same as yours.
Script:
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 returns just the data that you specified with }] appended at the end.
OUTPUT: