AngularJs seperate array and string in HTML template

Question

I have a little problem with creating a dynamic HTML template. To display some data in a table, I have to separate between an ordinary String and an Array. First things first: The HTML template is included in another template using the data-ng-include directive with a controller. The controller contains my data which is essentially an object with different attributes. The objcect looks something like this and contains strings as well as arrays:

$scope.data = {
    name: 'tony',
    city: 'New York',
    friends: ['Ann', 'Ben', 'John Doe'],
    postal: 12345
};

There is also a matching array with the attributes to parse the information dynamically.

$scope.attributes = [{name: "Name", id: 'name'},
                {name: "City", id: 'city'},
                {name: "Friends", id: 'friends'},
                {name: "Postal-code", id: 'postal'}
                ];

The data gets parsed inside the HTML using this code:

<table class="table table-striped">        
    <tbody>
      <tr ng-repeat="attr in attributes">
        <td>{{attr.name}}</td>
        <td>{{data[attr.id]}}</td>
      </tr>
    </tbody>
  </table>

This works absolutly fine for strings but I have to somehow determine if a attribute of data is an array to display the single records in a kind of List using ng-repeat on the record.

I tried to use Array.isArray(data[attr.id]) with an if-clause in different variations inside of <script>-tags but nothing works. At the end the data of the friends-attribute should get displayed one below the other in the same cell like this:

Here is the code on JsFiddle

Something like this? All values are transformed to array and then iterated over. — kudlajz
– kudlajz, Commented Aug 11, 2016 at 9:17

Nitish · Accepted Answer · 2016-08-11 09:29:51Z

1

you can isArray but not directly inside ng-show.

you can use it like this.

 $scope.isArray = angular.isArray;

so this way,

 <tr ng-repeat="person in persons">
   <td ng-repeat="attr in query.attribs">
     <span ng-show="isArray(person[attr.id])">
       <span ng-repeat="p in person[attr.id]">
          {{p}}
       </span>
     </span>
     <span ng-show="!isArray(person[attr.id])">
       {{person[attr.id]}}
     </span>
   </td>
</tr>

Here is your updated Fiddle

answered Aug 11, 2016 at 9:29

Nitish

6611 gold badge7 silver badges15 bronze badges

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

2 Comments

JohnDizzle Over a year ago

This works great for me. I just had to add track by $index to the ng-repeat ="p in person[attr.id] directive

Nitish Over a year ago

ok. you got what you need :) if its working then please accept answer

AB Udhay · Accepted Answer · 2016-08-11 09:35:10Z

1

You have to do some script and html changes if the value is an array like this Updated fiddle here : jsfiddle.net/Lt024p9h/7/

answered Aug 11, 2016 at 9:35

AB Udhay

7634 silver badges10 bronze badges

Comments

Bhavesh Upadhyay · Accepted Answer · 2016-08-11 09:40:26Z

0

Do Something Like this.

<tr ng-repeat="person in persons">
   <td ng-repeat="attr in query.attribs">
     <span ng-show="isArray(person[attr.id])">
       {{person[attr.id].toString()}}  
     </span>
     <span ng-show="!isArray(person[attr.id])">
       {{person[attr.id]}}
     </span>
   </td>
</tr>

answered Aug 11, 2016 at 9:40

Bhavesh Upadhyay

311 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJs seperate array and string in HTML template

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related