AngularJs Create Table using ng-repeat from custom Json

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>

Answers


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


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>

Need Your Help

Bootstrap font size

css twitter-bootstrap font-size

Is it possible to change all original Bootstrap font sizes of h1,h2,h3,h4 etc. elements at the same time by adding something to custom css file without writing new sizes for each separate element.

Instant Validation in JS

javascript validation design-patterns instant

Okay so the thing i want to do is create a JavaScript code that checks the input of the user and sees if it matches the rules and shows an error message instantly next to the text field saying "xxx...