Not fetching data with Angular JS

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: