angularjs - 使用 REST 进行 Angular http 获取

标签 angularjs json rest

我正在使用 Rest 在本地主机上以 Json 格式显示数据库中的信息。网址是http://localhost:8080/restful-services/api/getAllHorses .

我是 Angular 新手,我想做的是使用 http get 来访问 json 信息。

这是我的 json

[{"horse":{"age":"6yo","breeder":"David Harvey","countryBred":"(IRE)","horseAge":"6yo","horseId":1,"horseName":"Brain Power","owner":"Michael Buckley","pedigree":"Kalanisi","sex":"(08May11 b g)","trainer":{"days":9,"location":"Lambourn","seaonWinners":119,"seasonStrikeRate":27,"stake":-69.77,"trainerId":2,"trainerName":"Nicky Henderson"},"trainerName":"Nicky Henderson"}},

这是我在 Angular 上尝试过的,但它没有显示任何内容。非常感谢任何帮助,谢谢。

var horseApp = angular.module('horseApp', []);
   horseApp.controller('HorseCtrl', function ($scope, $http){
      $http.get('http://localhost:8080/restful-services/api/getAllHorses').success(function(data) {
      $scope.horse = data;
   });
});
<body ng-controller="HorseCtrl">
   <h2>Horses</h2>
   <table>
      <tr>
         <th>Age</th>
         <th>Name</th>
         <th>Breeder</th>
      </tr>
      <tr ng-repeat="age in Horse.age ">
         <td>{{horse.age}}</td>
         <td>{{horse.horesName}}</td>
         <td>{{horse.breeder}}</td>
      </tr>
   </table>
</body>

最佳答案

  • $http.success 已过时,请使用 then 代替。请参阅$http
  • 您想要迭代您的数组,因此修改 ng-repeat 应该可以做到这一点,现在您指向一个无效的属性 Age,因为 horse 是一个数组。 horse 的更好名称是 horses

修改后的代码

  horseApp.controller('HorseCtrl', function ($scope, $http){
    $http.get('http://localhost:8080/restful-services/api/getAllHorses')
        .then(function(response) {
      $scope.horse = response.data;
    });
  });

HTML

<tr ng-repeat="item in horse">
    <td>{{item.age}}</td>
    <td>{{item.horesName}}</td>
    <td>{{item.breeder}}</td>
</tr>

关于angularjs - 使用 REST 进行 Angular http 获取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42976770/

相关文章:

c# - 我可以在 Xamarin、C#、iOS 中保存对象数组(或 json 数组、字典数组)吗?

jquery - 使用Jquery ajax json响应?

javascript - 如何 forEach where (angular.js)

javascript - Angular 1.5 的单向数据绑定(bind)像双向一样工作

json - 解析 JSON Nodejs 时出错

java - Spring REST 服务不会因 URL 中的某些符号而触发

java - 获取自 EJB 以来的 RESTful 列表

java - 使用 Java 中的 RESTful API,生成工件。

javascript - 在“选择为”选项中插入输入文本

angularjs - 使用 angular-smiles.min.js 在 Angularjs 中实现富文本功能