CODEWITHSUNDEEP
angularjsjson
gitdemon
gitdemon

Reputation: 318

Trying to repeat a value from a JSON API and AngularJS

I'm using PetFinder API with Angular to display a JSON list. The problem I get stuck in is how to ng-repeat an array. My current code is the following:

AngularJS:

  awesomePF.controller('dogsController', function($scope, $http) {
...
      $scope.dogSearch = function(dogBreed, dogCity, dogState) {
        var durl = "https://crossorigin.me/http://api.petfinder.com/pet.find?key=1f0c7f48315c13e63b7b7923cacc7959&breed="+dogBreed+"&location="+dogCity+","+dogState+"&format=json";
        $http.get(durl)
           .then(function(res){
             for(var i = 0; i < x.length; i++ ){
              $scope.doggies = res.data.petfinder.pets.pet[x];
            }
              console.log(res.data);
            });
      };

    });

..or where the "for" is, I tried using simpler code like $scope.doggies = res.data.petfinder.pets; and worked my way up using <ul ng-repeat="pet in doggies">

The current work is located here and the query I'm using is Orlando Florida.

This is how the json looks like: enter image description here

EDIT:

More info. I can't seem to repeat the array. For example, I need only the dog's name to repeat for all pets in Orlando Florida. It can only get one at a time because I can only seem to get one result at a time: {{ pet[0].name.$t }}. I need the array to be a var instead of just one number

Thanks in advance.

Upvotes: 1

Views: 42

Answers (1)

Phil
Phil

Reputation: 164861

Looks to me like it should look like this

$http.get(durl).then(function(res) {
    $scope.doggies = res.data.petfinder.pets.pet;
});

then in your template

<dl ng-repeat="dog in doggies track by dog.id.$t">
    <dt>Name</dt>
    <dd>{{dog.name.$t}}</dd>
</dl>

Upvotes: 1

Related Questions