[{"Book ticket":[ {"a":"x", "b":"y" }, {"a":"p", "b":"q" }}],
"Book Train":[ {"a":"r", "b":"s" }, {"a":"t", "b":"u" }}]
Thanks in advance.
Regards,
Preethi B.
1 ACCEPTED SOLUTION
There are a few ways of achieving this table but here's one way with making a table for each book/cancel type:
Note: There were a few mistakes in your provided JSON example, ie missing quotes and closing braces.
Here is the HTML markup without comments:
<div class="panel panel-body">
<div ng-repeat="bookings in obj">
<h2 ng-repeat-start="(title,value) in bookings">{{title}}</h2>
<table class="table table-striped" ng-repeat-end>
<tr>
<th style="widht: 25%">Serial Number</th>
<th ng-repeat="(header,hValue) in value[0]">{{header}}</th>
</tr>
<tr ng-repeat="booking in value">
<td class="text-right">{{$index + 1}}</td>
<td ng-repeat="book in booking">{{book}}</td>
</tr>
</table>
</div>
</div>
This would render like the following:
Note: I took the liberty to use some bootstrap styling. If that isn't desired then just remove the classes set on table.
Here is the markup with comments explaining what's going on:
<!-- Wrapping everything in a div with a class of "panel panel-body" to give a panel background -->
<div class="panel panel-body">
<!-- Looping through the top array of JSON object-->
<div ng-repeat="bookings in obj">
<!-- Looping through each item of the top array: defining where it should start (ng-repeat-start)-->
<h2 ng-repeat-start="(title,value) in bookings">{{title}}</h2>
<!-- define where each top item should end (ng-repeat-end) -->
<table class="table table-striped" ng-repeat-end>
<tr>
<th style="width: 25%">Serial Number</th>
<!-- Each top item had an array as a value. Looping through to get the key/property to make the header dynamic -->
<th ng-repeat="(header,hValue) in value[0]">{{header}}</th>
</tr>
<!-- Reusing the top item value and just looping through the array making its own row -->
<tr ng-repeat="booking in value">
<!-- Using the index of the array to set the Serial number cell -->
<td class="text-right">{{$index + 1}}</td>
<!-- Looping through the objects in the booking array and getting the values -->
<td ng-repeat="book in booking">{{book}}</td>
</tr>
</table>
</div>
And of course your provided JSON object with corrections:
$scope.obj=[
{
"Book Rooms":[
{"Title":"ABC","Start":"2019-09-01"},
{"Title":"PQR","Start":"2019-03-06"}
],
"Book Flights":[
{"Title":"XYZ","Start":"2019-06-04"},
{"Title":"LMN","Start":"2019-05-03"}
],
"Cancel Trains":[
{"Title":"KJK","Start":"2019-06-03"}
]
}
];
NOTE: I took the html markup out of the stylized editor because it was removing some of the angularjs curly brace syntax
