LoseYou21 LoseYou21 -4 years ago 115
AngularJS Question

Angular http get with REST

I'm using Rest to display information from my database in Json format on my localhsost. The url is http://localhost:8080/restful-services/api/getAllHorses.

I'm new to angular and what I'm looking to do is use a http get to access the json information.

This is my 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"}},


This is what I've tried with the angular but it is not displaying anything. Any help is much appreciated, thanks.

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>



Answer Source
  • $http.success is obsolete, use then instead. See $http
  • You want to iterate over your array so modify the ng-repeat should do that, now you are pointing to a property age which is not valid as horse is an array. A better name for horse would be horses.

Modified code

  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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download