JSON input to table format in service portal

[Preethi5]

hi Team,

Could you please help to convert JSON format to table format in angular JS. The JSON format should be like below:

[{"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.

[Preethi5]

Thanks a lot for your response.

JSON object as:

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

Any help would be appreciated.

Regards,

Prets.

[ChrisBurks · 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

[Preethi5]

Thanks a lot for your response.

Here it will print all the values from JSON array in table format.

Suppose if I have multiple values in JSON array and I want to print only required fields in table format.How can we achieve that. For eg, I need only Serial number and Title in table.

Can you please help.

Thanks a lot for your help and support.. Appreciated.

Regards,

Prets.

[ChrisBurks]

Hi Prets,

The ng-if directive can help in this situation.

For the header add the directive as an attribute to the "<th>" element:

<th ng-repeat="(header,hValue) in value[0]" ng-if="header == 'Title'">{ {header}}</th>

And for the cell where the value would print change the ng-repeat to look for both the obj property and the value:
originally: ng-repeat="book in booking"

change to something like:  ng-repeat="(book,bValue) in booking"

Now the script can check what the property is using the ng-if directive:

ng-if="book == 'Title'"

The end result for the cell element would be

<td ng-repeat="(book, bValue) in booking" ng-if="book == 'Title'">{ {bValue} }</td>

All together:

<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="width: 25%">Serial Number</th>
        <th ng-repeat="(header,hValue) in value[0]" ng-if="header == 'Title'">{ { header } }</th>
      </tr>
      <tr ng-repeat="booking in value">
        <td class="text-right">{ { $index + 1 . } }</td>
        <td ng-repeat="(book, bValue) in booking" ng-if="book == 'Title'">{ { bValue } }</td>
      </tr>
    </table>
  </div>
</div>

[Preethi5]

Hi Chrisburks,

One last question. Suppose my JSON object is like below:

$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"}
]
"Cancel Car":[];

"Cancel Bus":[]

}
];

I don't have any value in 'Cancel Car' and 'Cancel Bus', So i dont want to include those in the table format.

In this case, how can we proceed.

Regards,

Prets.