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>

No sorry, i don't understand your suggestion. Can you explain again? — zura katsitadze, Nov 29 '15 at 10:26

score 1 · Accepted Answer · edited May 23 '17 at 12:08

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.

You should place the ng-repeat on tbody, and repeating tbody of table multiple times.
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

edited May 23 '17 at 12:08

Community

1
1

answered Nov 29 '15 at 10:07

Pankaj Parkar

134,766
23
234
299

when i try to use this code i have different table body. I don't have {{caterory.name}} this row in table – zura katsitadze Nov 29 '15 at 10:14
can you help me how to fix this problem ? – zura katsitadze Nov 29 '15 at 10:30
@zuri Yes I've fixed you problem..do look at updated code an answer..I'm updating the explanation right away.. – Pankaj Parkar Nov 29 '15 at 10:31
this code works good for me, {{ caterory.name }} – zura katsitadze Nov 29 '15 at 10:38
is it possible to do that ng-click="{{ schedule.action }}". i need to call different function. when i write this i got the following error Syntax Error: Token '{' invalid key at column 2 of the expression [{{ schedule.action }}] starting at [{ schedule.action }}]. – zura katsitadze Nov 29 '15 at 13:15
basically you can't have `{{}}` interpolation directive inside `ng-click` directive – Pankaj Parkar Nov 29 '15 at 13:19

score 1 · Answer 2 · answered Nov 29 '15 at 10:08

1

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>

answered Nov 29 '15 at 10:08

Zohaib Ijaz

21,926
7
38
60

Result is same, table body could not created with this code – zura katsitadze Nov 29 '15 at 10:11

AngularJs Create Table using ng-repeat from custom Json

2 Answers2

Linked