使用AngularJS从json中检索数据
我从头开始学习angular度js，目前正试图从json文件中检索数据。
我使用的是nodejs，express，AngularJS。
早些时候，我得到一个错误“意想不到的令牌D”上使用 –
$http.get("/models/driversList.json").success(function(response){$scope.driversList = response}) 已经解决了，但现在我得到这样的代码与当前代码 –
Drivers Championship Standings 1
我猜这个答案基本上是空白的，因此“1”却没有理解为什么会这样。
以下是我的文件 –
/app.js
app.use('/models',express.static(path.join(__dirname, 'private/data/db/models'))); app.use(express.static(path.join(__dirname, 'public'))); app.use('/scripts',express.static(path.join(__dirname, 'public/javascripts'))); app.use('/styles',express.static(path.join(__dirname, 'public/stylesheets')));
/javascripts/app.js
angular.module('F1FeederApp', [ 'F1FeederApp.controllers' ]);
/javascripts/controllers.js
angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, $http) { $http({ method: 'GET', url: '/models/driversList.json', data: {}, transformResponse: function (data, headersGetter, status) { //This was implemented since the REST service is returning a plain/text response //and angularJS $http module can't parse the response like that. return {data: data}; } }).success(function(response){ alert('worked'); $scope.driversList = response}).error(function(response) { $scope.driversList = [ { Driver: { givenName: response, familyName: 'Vettel' }, points: 322, nationality: "German", Constructors: [ {name: "Red Bull"} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: "Spanish", Constructors: [ {name: "Ferrari"} ] } ]; }) });
driversList.json
[ { Driver: { givenName: 'Eldorado', familyName: 'Vettel' }, points: 322, nationality: "German", Constructors: [ {name: "Red Bull"} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: "Spanish", Constructors: [ {name: "Ferrari"} ] } ]
的index.html
<!DOCTYPE html> <html> <head> <title>F-1 Feeder</title> <script src="/scripts/angular.min.js"></script> <script src="/scripts/controllers.js"></script> <script src="/scripts/app.js"></script> </head> <body ng-app="F1FeederApp" ng-controller="driversController"> <table> <thead> <tr><th colspan="4">Drivers Championship Standings</th></tr> </thead> <tbody> <tr ng-repeat="driver in driversList"> <td>{{$index + 1}}</td> <td> {{driver.Driver.givenName}} {{driver.Driver.familyName}} </td> <td>{{driver.Constructors[0].name}}</td> <td>{{driver.points}}</td> </tr> </tbody> </table> </body> </html>
编辑 ：
@rattanak
要回答第3点，是的，如果我简单地将数组variables赋值给作用域variables，它是有效的。 错误（）中的部分是以前工作的部分。
我也试过点1，似乎json是在“数据”中，所以我分配给driversList response.data，现在得到这个错误 –
Data: [{Driver:{givenName:'Eldorado',familyName:'Vettel'},points:322,nationality:"German",Constructors:[{name:"Red Bull"}]}] Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.7/ngRepeat/dupes?p0=driver%20in%20driversList.data&p1=string%3Ar&p2=r at Error (native) at http://localhost:3000/scripts/angular.min.js:6:416 at http://localhost:3000/scripts/angular.min.js:280:39 at Object.fn (http://localhost:3000/scripts/angular.min.js:129:401) at na$get.n.$digest (http://localhost:3000/scripts/angular.min.js:130:483) at na$get.n.$apply (http://localhost:3000/scripts/angular.min.js:133:512) at h (http://localhost:3000/scripts/angular.min.js:87:376) at K (http://localhost:3000/scripts/angular.min.js:91:499) at XMLHttpRequest.z.onload (http://localhost:3000/scripts/angular.min.js:93:37)
表明有重复
您的文件driverlist.json不包含有效的JSON代码。 这个代码应该是：
[ { "Driver": { "givenName": "Eldorado", "familyName": "Vettel" }, "points": 322, "nationality": "German", "Constructors": [ {"name": "Red Bull"} ] }, { "Driver": { "givenName": "Fernando", "familyName": "Alonso" }, "points": 207, "nationality": "Spanish", "Constructors": [ {"name": "Ferrari"} ] } ]
纠正这一点，然后再试一次。
JSON始终使用双引号（“）从不单引号（'）
有关正确JSON的更多信息，请参阅http://www.json.org/
好像$ http服务没有成功parsing。 如果不实际testing代码，很难说清楚。 使用Chrome开发者控制台，我将通过以下方式debugging代码：
- 在promise的成功函数中使用
console.log($scope.driversList)。 -
在promise的错误函数中使用
console.log(error)。 -
您是否可以在不使用$ http服务的情况下运行代码，即将数据的数组variables赋值给
$scope.driversList。
我很乐意为你testing，如果你可以提供一个github链接或什么的。
- 在数据库问题中坚持数据，在控制台上接收NULL
- 带有websockets的Express.js
- 路由在AngularJS中使用HTML来提供JS文件
- 由于“没有捕获的浏览器”消息，Karma没有运行unit testing
- 无法加载Java脚本文件和bower_components / angular / angular.js
- 在html5模式下使用ng-route重新加载angular度页面不会返回index.html
- 当它不应该时，authentication返回“401（未授权）”
- 如何在执行完所有testing用例之后closures浏览器，或者使用带有angularjs的selenium服务器的量angular器testing用例失败之后
- 我怎样才能返回对应于node.js中的URL请求的XML文件？