Question

我正在尝试使用Angular JS构建一个从Django REST API获取数据的应用程序。

我有这个脚本

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>

但我在控制台中收到此错误

错误：$ resource：badcfg
  响应与配置的参数
不匹配   操作query的资源配置出错。预期的响应包含一个数组但得到一个对象（请求：GET /教室）

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

我没有得到错误，但也没有数据。但是，网页上有一些表格，比如它是否试图捕获＆＃34;什么，这里是截图

的更新：

我试图把这一行

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

而不是这个

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

在Angular应用上，并且没有数据，但是，如果我转到网络上的开发者工具 - ＆gt; 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中的表格中没有显示这些数据。

更新2：

添加＆＃34;？format = json＆＃39;＆＃34;到资源网址，我得到了确切的行数（在我的数据中我有三个教室，所以我在HTML表中得到三行），但没有数据。

更新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格式不正确。您发布的数据最终缺少}]。重新检查您的服务器响应。

我在我的机器上复制了整个场景，你的代码运行得非常好。

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仅返回您在末尾附加}]指定的数据。

<强>输出：

不使用Angular JS

1 个答案: