AngularJs Create Table using ng-repeat from custom Json

Question

I want to create html table. I use AngularJs directive - ng-repeat. I have data which is loaded from server. Data type is text/json. My Json structure is below

[  
   {  
      "branch":"wdads",
      "name":"STANDART",
      "Tags":[  

      ],
      "Rooms":[  
         {  
            "roomNo":"11",
            "branch":"wdads",
            "Schedule":[  
               {  
                  "id":"",
                  "status":"free",
                  "currentDate":"2015-10-31T20:00:00.000Z"
               },
               {  
                  "id":"",
                  "status":"free",
                  "currentDate":"2015-10-31T20:00:00.000Z"
               }
            ]
         }
      ]
   },
   {  
      "branch":"wdads",
      "name":"VIP",
      "Tags":[  

      ],
      "Rooms":[  
         {  
            "roomNo":"1",
            "branch":"wdads",
            "Schedule":[  
               {  
                  "id":"",
                  "status":"free",
                  "currentDate":"2015-12-29T20:00:00.000Z"
               },
               {  
                  "id":"",
                  "status":"free",
                  "currentDate":"2015-12-29T20:00:00.000Z"
               }
            ]
         },
         {  
            "roomNo":"2",
            "branch":"wdads",
            "Schedule":[  
               {  
                  "id":"",
                  "status":"free",
                  "currentDate":"2015-12-29T20:00:00.000Z"
               },
               {  
                  "id":"",
                  "status":"free",
                  "currentDate":"2015-12-29T20:00:00.000Z"
               }
            ]
         }
      ]
   }
] 

I'm trying to create table body, but it does not working. I don't have result.

 <tbody>
            <div ng-repeat="caterory in categories">
              <tr>{{caterory.name}}<tr>
              <tr ng-repeat="room in caterory.Rooms">
                <td>{{room.roomNo}}</td>
                <td ng-repeat="schedule in room.Schedule">{{schedule.status}}</td>
              </tr>
            </div>
          </tbody>

Answer 1

Basically the html you wrote is invalid html.

You could not have div element directly inside table's tbody, thead, tfoot, tr elements, If you tried to do this then that HTML would be considered as an invalid html.

You could have that element inside th/td element of the table. Basically this elements are used to display data on table.

To solving you problem you need to do couple of things.

1. You should place the ng-repeat on tbody, and repeating tbody of table multiple times.
2. While showing data on table row from tr tag you should use td element. As you are directly using tr should be changed to <tr><td ng-bind="$first ?caterory.name : ''"></td><tr>

Markup

<tbody ng-repeat="caterory in categories">
    <tr ng-repeat="room in caterory.Rooms">
      <td ng-bind="$first ?caterory.name : ''"></td>
      <td>{{room.roomNo}}</td>
      <td ng-repeat="schedule in room.Schedule">{{schedule.status}}</td>
    </tr>
</tbody>

More detailed answer here How to structure html while using table.

Working Plunkr

Answer 2

Do something

<tbody>
     <tr ng-repeat="caterory in categories">{{caterory.name}}<tr>
     <tr ng-repeat="room in caterory.Rooms">
        <td>{{room.roomNo}}</td>
        <td ng-repeat="schedule in room.Schedule">{{schedule.status}}</td>
     </tr>
</tbody>