ng-repeat不适用于一项

Question

So I have a JSON array object that I'm doing an AngularJS ng-repeat on, the following code works when breed and/or option has more than one object, but not when they only have one object, in fact doing pet.breeds.breed[0] or pet.options.option[0] doesn't return anything when those objects only have one object

  "pet": { "options": { "option": [{ "$t": "hasShots" }] }, "status": { "$t": "A" }, "contact": { "phone": {}, "state": { "$t": "NC" }, "address2": {}, "email": { "$t": "deborah@rainingpets.com" }, "city": { "$t": "Charlotte" }, "zip": { "$t": "28210" }, "fax": {}, "address1": {} }, "age": { "$t": "Adult" }, "size": { "$t": "L" }, "id": { "$t": "37778045" }, "shelterPetId": {}, "breeds": { "breed": { "$t": "German Shepherd Dog" } }, "name": { "$t": "Axel" }, "sex": { "$t": "M" }, "description": { "$t": "Axel is a handsome 4-year-old German Shepherd who is looking for a home. He is a large boy weighing 95 pounds but should be closer to 80. He has the GSD prey drive and would do best with someone who is experienced with the breed. Axel is a typical Shepherd; loving, loyal and good with children. He is also playful and does need a fenced yard to play in.\\n\\nAxel is vaccinated, neutered and micro-chipped." }, "mix": { "$t": "no" }, "shelterId": { "$t": "NC880" }, "lastUpdate": { "$t": "2017-04-08T19:31:08Z" }, "animal": { "$t": "Dog" } } 

  <div class="ui label" ng-repeat="(k, breed) in pet.breeds.breed">{{breed.$t}}</div> 

Answer 1

you can use angular.isArray for check it.

 var app = angular.module('anApp', []); app.controller('ctrl', function($scope) { $scope.data = { "pet": { "breeds": { "breed": { "$t": "Siamese" } } } } $scope.isArray = angular.isArray($scope.data.pet.breeds.breed); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> <div ng-app="anApp" ng-controller="ctrl"> <div class="form-group"> <div class="ui label" ng-if="isArray" ng-repeat="(k, breed) in data.pet.breeds.breed">{{breed.$t}}</div> <div class="ui label" ng-if="!isArray" ng-repeat="(k, breed) in data.pet.breeds">{{breed.$t}}</div> </div> </div> 

Answer 2

Assuming that if more than one exists the structure of breeds.breed is array and is object for only one you will be best off mapping the data to consistent array structure before passing to view

Something like:

$http.get('path/to/api').then(function(res){
  var pet = res.data.pet;
  if(angular.isArray(pet.breeds.breed) ){
     // already an array
     $scope.breeds = pet.breeds.breed;
   }else{
     // put object in new array
     $scope.breeds = [pet.breeds.breed];
   }
})

Then in view:

<div class="ui label" ng-repeat="breed in breeds">{{breed.$t}}</div>

Or if you need to keep it all in the same pet object and not create new scope properties just use conditional to change the corresponding property to array if it isn't already

 if(pet.breeds.breed && !angular.isArray(pet.breeds.breed) ){
     pet.breeds.breed  = [pet.breeds.breed];       
 }

Answer 3

Since you are looping object in ng-repeat key name with symbols like $ is not supported. you need to remove the $ mark from the property

 angular.module("app",[]) .controller("ctrl",function($scope){ $scope.obj = { "pet": { "options": { "option": [{ "$t": "hasShots" }] }, "status": { "$t": "A" }, "contact": { "phone": {}, "state": { "$t": "NC" }, "address2": {}, "email": { "$t": "deborah@rainingpets.com" }, "city": { "$t": "Charlotte" }, "zip": { "$t": "28210" }, "fax": {}, "address1": {} }, "age": { "$t": "Adult" }, "size": { "$t": "L" }, "id": { "$t": "37778045" }, "shelterPetId": {}, "breeds": { "breed": { "t": "German Shepherd Dog" } }, "name": { "$t": "Axel" }, "sex": { "$t": "M" }, "description": { "$t": "Axel is a handsome 4-year-old German Shepherd who is looking for a home. He is a large boy weighing 95 pounds but should be closer to 80. He has the GSD prey drive and would do best with someone who is experienced with the breed. Axel is a typical Shepherd; loving, loyal and good with children. He is also playful and does need a fenced yard to play in.\\n\\nAxel is vaccinated, neutered and micro-chipped." }, "mix": { "$t": "no" }, "shelterId": { "$t": "NC880" }, "lastUpdate": { "$t": "2017-04-08T19:31:08Z" }, "animal": { "$t": "Dog" } } } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div class="ui label" ng-repeat="(k, breed) in obj.pet.breeds.breed">key- {{k}} <br> value- {{breed}}</div> </div> 

Answer 4

Simply add below line to your controller scope, in JS file

$scope.isArray = angular.isArray;

In your view file add below check

<div ng-if="isArray($scope.pet.breeds)>
    -- Code for ng-repeat
</div>

 <div ng-if="!isArray($scope.pet.breeds)>
    -- Code for direct data read $scope.pet.breeds.breet.$t
</div>

I hop it helps.