使用 REST 獲取 Angular http

Question

我正在使用 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>

Answer 1

$http.success已過時，請改用then 。 見$http
您想遍歷您的數組，因此修改 ng-repeat 應該這樣做，現在您指向的屬性年齡無效，因為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>

Answer 2

更改 ng-repeat 中的變量，如下所示

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

使用then而不是success

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

使用 REST 獲取 Angular http

問題描述

2 個解決方案

解決方案1
2 已采納 2017-03-23 13:06:30

解決方案2
0 2017-03-23 13:02:30

使用 REST 獲取 Angular http

問題描述

2 個解決方案

解決方案1 2 已采納 2017-03-23 13:06:30

解決方案2 0 2017-03-23 13:02:30

解決方案1
2 已采納 2017-03-23 13:06:30

解決方案2
0 2017-03-23 13:02:30