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.

Mukund Kumar · Accepted Answer · 2014-10-27 16:51:14Z

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, 2014 at 16:51

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Idris Over a year ago

Its working fine... But it shows with array and non array at a time

David Votrubec · Accepted Answer · 2014-10-30 14:45:31Z

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 · Accepted Answer · 2015-06-24 08:20:19Z

0

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

edited Jun 24, 2015 at 8:20

answered Jun 24, 2015 at 5:51

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

ng-repeat on non array object

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related