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
– zura katsitadze, Commented Nov 29, 2015 at 10:26

Community · Accepted Answer · 2017-05-23 12:08:08Z

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, 2017 at 12:08

CommunityBot

11 silver badge

answered Nov 29, 2015 at 10:07

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

zura katsitadze Over a year ago

when i try to use this code i have different table body. I don't have <tr>{{caterory.name}}</tr> this row in table

zura katsitadze Over a year ago

can you help me how to fix this problem ?

Pankaj Parkar Over a year ago

@zuri Yes I've fixed you problem..do look at updated code an answer..I'm updating the explanation right away..

zura katsitadze Over a year ago

this code works good for me, <tr> <td>{{ caterory.name }}</td> </tr>

zura katsitadze Over a year ago

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 }}].

|

Zohaib Ijaz · Accepted Answer · 2015-11-29 10:08:47Z

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, 2015 at 10:08

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

1 Comment

zura katsitadze Over a year ago

Result is same, table body could not created with this code

Collectives™ on Stack Overflow

AngularJs Create Table using ng-repeat from custom Json

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related