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.

[Brandon Barret1]

Have you tried using the parse function?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://community.servicenow.com/community?id=community_question&sys_id=c7720321dbd8dbc01dcaf3231f961963

[Alikutty A]

Hi,

You can use this to parse your JSON object.

var json = {"Book_ticket":[ {"a":"x", "b":"y" }, {"a":"p", "b":"q" }], "Book_train":[ {"a":"r", "b":"s" }, {"a":"t", "b":"u" }]};

for(var x=0; x<json.Book_ticket.length; ++x){
    alert(json.Book_ticket[x].a);
    alert(json.Book_ticket[x].b);
}

for(var y=0; y<json.Book_train.length; ++y){
    alert(json.Book_train[y].a);
    alert(json.Book_train[y].b);
}

The Json format need a minor change as above

[Preethi5]

hi Alikutti,

Thanks for the response.

I am working on service portal.

HTML code:

<h2>Book Rooms</h2>
<table border="1">

<tr>
<th>serial Number</th>
<th>Title</th>
<th>End Date</th>
</tr>


<tr ng-repeat= "s in obj">

<td><label>{{$index + 1}}</label></td>
<td><label>{{s.title}}</label></td>
<td><label>{{s.end}}</label></td>
</tr>
</table>

Client:

function($uibModal, $scope) {
var c = this;
$scope.obj={"Book_ticket":[ {"a":"x", "b":"y" }]};

openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope

});
}

This is for single array. Could you please help to print the value in table format for the below JSON

----> var obj = {"Book_ticket":[ {"a":"x", "b":"y" }, {"a":"p", "b":"q" }], "Book_train":[ {"a":"r", "b":"s" }, {"a":"t", "b":"u" }]};

Thanks,

Prets.

[ChrisBurks]

I still think that you need a little more information as to where the characters map to your table. For me, I can't tell from your HTML markup where what value or key even is suppose to display in the table. 

The data itself can be manipulated in so many ways here are just a few examples:

Here is the markup for all of those variations using the same obj data you provided:

<div class="panel panel-body">
  <h2>Book Rooms v1</h2>
  <table border="1" class="table table-striped m-b-lg">

    <tr>
      <th>Serial Number</th>
      <th>Title</th>
      <th>End Date</th>
    </tr>


    <tr ng-repeat= "(s,lval) in obj">
      <td><label>{{s}}</label></td>
      <td ng-repeat="t in lval"><label class="m-r-lg">{{t.a}}:</label>{{t.b}}</td>
    </tr>
  </table>

  <h2>Book Rooms v2</h2>
  <table border="1" class="table table-striped">

    <tr>
      <th>Serial Number</th>
      <th>Title</th>
      <th>End Date</th>
    </tr>


    <tr ng-repeat= "(t, tval) in obj">

      <td><label>{{t}}</label></td>
      <td ng-repeat="u in tval"><label class="m-r-lg" ng-repeat-start="(v,vVal) in u">{{v}}:</label><span class="m-r-lg" ng-repeat-end>{{vVal}}</span></td>
    </tr>
  </table>

  <h2>Book Rooms v3</h2>
  <table border="1" class="table table-striped">

    <tr>
      <th>Serial Number</th>
      <th>Title</th>
      <th>End Date</th>
    </tr>


    <tr ng-repeat= "t in obj">

      <td><label>{{$index + 1}}</label></td>
      <td ng-repeat="u in t"><label class="m-r-lg">{{u.a}}:</label>{{u.b}}</td>
    </tr>
  </table>
  
  <h2>Book Rooms v4 <small>{{obj}}</small></h2>
  <table border="1" class="table table-striped">

    <tr>
      <th>Serial Number</th>
      <th>Title</th>
      <th>End Date</th>
    </tr>


    <tr ng-repeat= "t in obj">

      <td><label>{{$index +1}}</label></td>
      <td ng-repeat="u in t"><label class="m-r-lg" ng-repeat-start="(v,vVal) in u">{{v}}:</label><span class="m-r-lg" ng-repeat-end>{{vVal}}</span></td>
    </tr>
  </table>
  
  <h2>Book Rooms v5</h2>
  <table border="1" class="table table-striped">

    <tr>
      <th>Serial Number</th>
      <th>Title</th>
      <th>End Date</th>
    </tr>


    <tr ng-repeat= "(sKey,sVal) in obj">

      <td><label>{{sKey}}</label></td>
      <td ng-repeat="t in sVal"><label class="m-r-lg">{{t.a}}:</label>{{t.b}}</td>
    </tr>
  </table>
  
  <h2>Book Rooms v6</h2>
  <table border="1" class="table table-striped">

    <tr>
      <th>Serial Number</th>
      <th style="text-transform: capitalize" ng-repeat="(sKey,sVal) in obj">{{sKey.replace("_"," ")}}</th>
    </tr>

	<tr ng-repeat-start= "(sKey,sVal) in obj" ng-repeat-end>

      <td><label>{{$index +1}}</label></td>
      <td><label ng-class="'m-r-lg'" ng-repeat="ticket in obj['Book_ticket'][$index]">{{ticket}}<span ng-if="$first">:</span></label></td>
      <td><label ng-class="'m-r-lg'" ng-repeat="ticket in obj['Book_train'][$index]">{{ticket}}<span ng-if="$first">:</span></label></td>
    </tr>
    
  </table>
</div>

Maybe an example with some demo data for both the html markup and object values would help.