ng-repeat on non array object

Question

I know that ng-repeat works only on array.

My problem is when I don't know if the object that I get from the server, is array, or only object.
I need to determine dynamically if it's array or object, and only if it's array use ng-repeat.

My question is what is the best way implement using ng-repeat with condition - only if the object is an array?

I tried to solve the problem this way:

 <div ng-if="Array.isArray(myObj)"ng-repeat="item in myObj">
      <do-some-stuff item='item'></do-some-stuff>
 </div>
 <do-some-stuff ng-if="!Array.isArray(myObj)" item='myObj'></do-some-stuff>

But it's not working.

score 7 · Accepted Answer · answered Oct 27 '14 at 16:51

7

ng-repeat priority is 1000 and ng-if priority is 600. so ng-repeat execute first and then ng-if.that's why your code not working .use this code:

<div ng-if="Array.isArray(myObj)">
      <div ng-repeat="item in myObj">
          <do-some-stuff item='item'></do-some-stuff>
      </div>
 </div>
 <do-some-stuff ng-if="!Array.isArray(myObj)" item='myObj'></do-some-stuff>

answered Oct 27 '14 at 16:51

Mukund Kumar

21,413
18
59
79

Its working fine... But it shows with array and non array at a time – Idris Feb 01 '17 at 15:54

score 0 · Answer 2 · answered Oct 30 '14 at 14:45

Priority of directives might be issue but I would argue that in the cause the real cause is elsewhere.

Angular tries to search for definion of Array.isArray() on the current $scope. And can not find it.

You have to add reference to $window to your controller and then declare your own function to check if object is array.

something like this

Controller:

 $scope.isArray = function(obj) { 
  //Check if Array.isArray is available (is not supported in IE8)
  var fn = $window.Array.isArray || $window.angular.isArray;
  return fn(obj);
 }

HTML

<div ng-if="isArray(myObj)">
      <div ng-repeat="item in myObj">
          <do-some-stuff item='item'></do-some-stuff>
      </div>
 </div>
 <do-some-stuff ng-if="!isArray(myObj)" item='myObj'></do-some-stuff>

RIYAJ KHAN · Answer 3 · 2015-06-24T08:20:19.107

This can be achieved in another way also.

you can return the required array or empty value based on your conditions using the testForArray function

<div  ng-repeat="item in testForArray()">
      <span>{{item.name}}</span>
      <do-some-stuff item='item'></do-some-stuff>
 </div>

Within this function you can check your required logic whether the data is an array or object

var myObj = [{name : '1'},{name : '3'},{name : '3'}]


      $scope.testForArray = function(){
        console.log("hello")
        if(angular.isArray(myObj)){
          return myObj
        }else{
          return []; 
        }

      }

Here is the plunker

ng-repeat on non array object

3 Answers3