How to print a specific element of an array in a html table with angularjs?

Question

I am learning Angular now and got stuck here. What I have tried is:

<tr ng-show="data in myData17.layouts | limitTo:2 | slice:1">
  <td>{{data.name}}</td>
  <td>{{data.cards[1].cardNo}}</td>
  <td>{{data.cards[1].cardType}}</td>
  <td>{{data.cards[1].ports[0].portNo}}</td>
  <td>{{data.cards[1].ports[0].portName}}</td>
  <td>{{data.cards[1].ports[0].portType}}</td>
  <td>{{data.cards[1].ports[0].portspeed}}</td>
  <td>{{data.cards[1].ports[0]["ds-scheduler-node-profile"]}}</td>                  
</tr>

where layouts is an array that has up to 10 elements in it but I want to access the data that is in index=1.

It is not so clear what you want to display. You need only one row? Can you show a sample of the data array? ng-show doesn't have that syntax, ng-repeat does — Bill P
– Bill P, Commented Dec 26, 2019 at 12:53
bill, in a simple way I wanted to display only one index value in an array of say 10 indexes. Thanks anyway I got help! — yoganand
– yoganand, Commented Dec 27, 2019 at 7:34
If this is the case, then you don't even need to use ng-repeat. There is no reason to loop through the entire array — Bill P
– Bill P, Commented Dec 27, 2019 at 8:29
I need ng-repeat to loop through that selected index which is again an array — yoganand
– yoganand, Commented Dec 27, 2019 at 9:37

PattySpringDev · Accepted Answer · 2019-12-30 04:56:46Z

2

You use ng-repeat instead of ng-show for looping and use $index for accessing item.

<tr ng-repeat="data in myData17.layouts">
  <td ng-show="$index==0">{{data.name}}</td>
  <td ng-show="$index==0">{{data.cards[0].cardNo}}</td>
  <td ng-show="$index==0">{{data.cards[0].cardType}}</td>
  <td ng-show="$index==0">{{data.cards[0].ports[0].portNo}}</td>
  <td ng-show="$index==0">{{data.cards[0].ports[0].portName}}</td>
  <td ng-show="$index==0">{{data.cards[0].ports[0].portType}}</td>
  <td ng-show="$index==0">{{data.cards[0].ports[0].portspeed}}</td>
  <td ng-show="$index==0">{{data.cards[0].ports[0]["ds-scheduler-node-profile"]}}</td>                  
</tr>

edited Dec 30, 2019 at 4:56

PattySpringDev

17711 bronze badges

answered Dec 26, 2019 at 13:15

Ashish Bakwad

8115 silver badges16 bronze badges

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

2 Comments

yoganand Over a year ago

Ashish this works fine. thanks but can I print those cardNo, cardType etc values dynamically using another ng-repeat inside but not sure how, any suggestions?

Ashish Bakwad Over a year ago

yes you can print those value also using nested ng-repeat <td ng-show="$index==0"><span ng-repeat="card in data.cards">{{card.cardNo}}</span></td>. For structure data you have to create table layout accordingly.

Collectives™ on Stack Overflow

How to print a specific element of an array in a html table with angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related