ng-repeat not displaying the data in table format

Question

The below code snippet need to print the toolDTO object (i.e. Array of object and each object has key and value pairs).

<div ng-show="isResult" style="color: green;">
                    <table class="tble">
                        <thead>
                            <tr ng-repeat="(key, value) in toolDTO[0]" align="center"
                                style="background: #7e7e7e; color: #FFFFFF; font-size: small;">
                                <th><b>{{key}}</b></th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="tool in toolDTO">                         
                            <tr ng-repeat="(key, value) in tool"
                                style="font-size: small;">
                                <td>{{value}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

toolDTO structures:

 [
        {
            "EMPLOYEE_NUMBER": "1234",
            "FIRST_NAME": "Ram",
            "LAST_NAME": "Rakul",
            "EMAIL": "Ram.Rakul@example.com",
            "UPDATED_BY": 5678,
            "UPDATED_DATE": "2018-01-23 17:25:42.635"
        },
        {
            "EMPLOYEE_NUMBER": "45678",
            "FIRST_NAME": "vinod",
            "LAST_NAME": "nai",
            "EMAIL": "vinto.nani@example.com",
            "UPDATED_BY": 5678,
            "UPDATED_DATE": "2018-01-12 20:38:50.191"
        },

    ]

The ng repeat code printing the above data like below.

      EMAIL 
      EMPLOYEE_NUMBER
      FIRST_NAME
      LAST_NAME
      UPDATED_DATE
      UPDATED_BY
     Ram.Rakul@example.com
     1234
     Ram
     Rakul
     2018-01-23 17:25:42.635
     5678

But I need it below table format:

EMPLOYEE_NUMBER  FIRST_NAME LAST_NAME EMAIL  UPDATED_BY   UPDATED_DATE
 1234            Ram        Rakul    Ram.Rakul@example.com 5678        2018-01-23.

Answer 1

You have to repeat thead > th element for table headers not thead > tr. Also repeat tbody > td not tbody > tr for rows.

<div ng-show="isResult" style="color: green;">
                    <table class="tble">
                        <thead>
                            <tr align="center" style="background: #7e7e7e; color: #FFFFFF; font-size: small;">
                                <th ng-repeat="(key, value) in toolDTO[0]"><b>{{key}}</b></th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="tool in toolDTO">
                            <tr style="font-size: small;">
                                <td ng-repeat="(key, value) in tool">{{value}}</td>
                            </tr>
                        </tbody>
                    </table>
</div>