How to use ng-repeat only if object type is array?

Question

I have a complex object as shown below:

$scope.document = 
 {
  "GENERAL_FIELDS": {
    "Source_Type": "custom",
    "Annotations": [
      "216/content/Factiva_CM_001/Proteins",
      "216/content/Factiva_CM_001/Fact"
    ],
    "Content": [
      "   Baculovirus; Budded virus; Ultrastructure; Cryo-EM;"
    ],
    "Title": [
      "Budded baculovirus particle structure revisited"
    ]
  },
  "stn": {
    "Document_Type": [
      "Journal",
      "Article"
    ]
  }
}

I want to display all the fields present in "GENERAL_FIELDS" and "stn". Fields' value can either be string or array of strings. If it is array, I further want to ng-repeat on it and display the content. Following is my html:

<div id="titsec" class="comdocdet"  ng-repeat="(category, group) in document">
   <div ng-repeat="(key, value) in group">
      <div class="pTitle">
         {{key}}
      </div>
      <div class="contdesc">
         <div ng-if="Array.isArray(value)">
            <div ng-repeat="v in value">
               {{v}}
            </div>
         </div>
         <div ng-if="!Array.isArray(value)">
            {{value}}
         </div>
      </div>
   </div>
</div>

But ng-if="Array.isArray(value)" is never true and array fields are being displayed in object form: ["Journal","Article"]. What am I missing ?

value.length? --

yBrodsky
– yBrodsky

2016-11-23 18:51:32 +00:00
Commented Nov 23, 2016 at 18:51 — yBrodsky
– yBrodsky, Commented Nov 23, 2016 at 18:51
would give length of the string as well

Manoj Suthar
– Manoj Suthar

2016-11-23 18:52:12 +00:00
Commented Nov 23, 2016 at 18:52 — Manoj Suthar
– Manoj Suthar, Commented Nov 23, 2016 at 18:52

Farzad Salimi Jazi · Accepted Answer · 2016-11-23 19:11:30Z

4

Or add this in your controller and leave rest like it is.

 $scope.isArray = angular.isArray;

html would be like this :

<div ng-if="isArray(value)">
  <div ng-repeat="v in value">
    {{v}}
  </div>
</div>
<div ng-if="!isArray(value)">
            {{value}}
</div>

edited Nov 23, 2016 at 19:11

answered Nov 23, 2016 at 19:02

Farzad Salimi Jazi

76010 silver badges26 bronze badges

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

Comments

rrd · Accepted Answer · 2016-11-23 18:52:23Z

3

Instead of accessing a method on the Array object directly in the template, you should do in your controller. So for example:

<div ng-if="vm.isValueAnArray(value)">
  // Some html
</div>

Your controller:

function isValueAnArray(val) {
  return Array.isArray(val);
}

I haven't tested it, but logic should be in the controller, not in the template.

answered Nov 23, 2016 at 18:52

rrd

5,9873 gold badges32 silver badges37 bronze badges

2 Comments

Manoj Suthar Over a year ago

Thanks mate! worked with this. But why wouldn't it work from template ?

Sᴀᴍ Onᴇᴌᴀ Over a year ago

@ManojSuthar see the explanation in my updated Answer

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2016-11-23 20:31:04Z

This is an issue of Scoping

The scope of the template is relative to $scope in the controller, so when it looks for Array, it will look for that in the controller scope (e.g. $scope.Array).

One option is to use ng-if="window.Array.isArray(value)". See the working example below.

Another option is to set $scope.Array = Array.prototype in the controller. That way there is no need to reference window before calling Array.isArray().

Another option is to create an alias for Array.isArray() in the controller scope:

$scope.isValueAnArray = Array.isArray;

Then call that function to determine if the value is an array.

angular.module('ang', [])
  .controller('cont', function($scope) {
    //use this to avoid referencing window in the template
    //$scope.Array = Array.prototype;
    $scope.document = {
      "GENERAL_FIELDS": {
        "Source_Type": "custom",
        "Annotations": [
          "216/content/Factiva_CM_001/Proteins",
          "216/content/Factiva_CM_001/Fact"
        ],
        "Content": [
          "   Baculovirus; Budded virus; Ultrastructure; Cryo-EM;"
        ],
        "Title": [
          "Budded baculovirus particle structure revisited"
        ]
      },
      "stn": {
        "Document_Type": [
          "Journal",
          "Article"
        ]
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ang" ng-controller="cont">
  <div id="titsec" class="comdocdet" ng-repeat="(category, group) in document">
    <div ng-repeat="(key, value) in group">
      <div class="pTitle">
        {{key}}
      </div>
      <div class="contdesc">
        <div ng-if="window.Array.isArray(value)">
          <div ng-repeat="v in value">
            {{v}}
          </div>
        </div>
        <div ng-if="!window.Array.isArray(value)">
          {{value}}
        </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

How to use ng-repeat only if object type is array?

3 Answers 3

Comments

2 Comments

This is an issue of Scoping

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

This is an issue of Scoping

Comments

Your Answer

Sign up or log in

Post as a guest

Related