Angular http get with REST

Question

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>
</body>

Igor · Accepted Answer · 2017-03-23 13:06:30Z

$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>

Ankur · Accepted Answer · 2017-03-23 13:08:57Z

0

Change variables in ng-repeat like below

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

use then instead of success

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

edited Mar 23, 2017 at 13:08

answered Mar 23, 2017 at 13:02

Ankur

3,2095 gold badges30 silver badges57 bronze badges

1 Comment

websch01ar Over a year ago

Change $scope.horses = response.data;

Collectives™ on Stack Overflow

Angular http get with REST

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related