CODEWITHSUNDEEP
angularjs
AjRev
AjRev

Reputation: 95

How to use ng-repeat on an array that contains an object among other values

I've an array that contains elements and an object. I need to display the elements and both the key and the value of the object in html.

I've tried using ng-repeat; the values of the array elements appear but not the object keys and values.

$scope.systemarray = [{'system':'DHX','DB':{'DEV':'DH1','QAS':'QH1'}}]
<tr>
<th scope="col">System</th>
<th scope="col">DB</th>
<th scope="col">Application</th>
</tr>

I want to display 'DHX' under the heading 'System'

DEV and QAS under the heading 'DB'

and display 'DH1' and 'QH1' under the heading 'Application'.

Additional info: 'DEV' is a database name and 'DH1' is the name of an application that uses 'DEV' as it's DB and so is QAS and QH1. I've several such databases and applications and that is why I chose to create the object in this manner - 'DBname':'Appname'.

There are several such applications and therefore each time I retrieve this data from a python program, I'll have different 'DBname' and its corresponding 'Appname'. Thanks for your time

Upvotes: 0

Views: 50

Answers (1)

BartoszTermena
BartoszTermena

Reputation: 1487

You could try this to display your system, database and application name: 

<table>
  <thead>
    <tr>
      <th>System</th>
      <th>DB</th>
      <th>Application</th>
    </tr>
  </thead>
  <tbody ng-repeat="system in systemarray">
      <tr ng-repeat="(databaseName, applicationName) in system.DB">
         <td>{{system.system}}</td>
         <td>{{databaseName}}</td>
         <td>{{applicationName}}</td>
      </tr>
  </tbody>
</table>

plunker: http://plnkr.co/edit/YPIj5VEep57jK4YscGoG?p=preview

Hope it helps!

Upvotes: 2

Related Questions