angularjs - How to pass values from Server to HTML in Servicenow Service Portal

Question

I am able to pull in data in server side that data i want to set in the HTML table boxes which we created.

Below is my HTML code which creates table with row and columns.

<div class="panel panel-body">
  <h2>Book Rooms v1</h2>
  <table border="2" class="table m-b-lg">
    <thead>
      <tr>
        <th>Serial Number</th>
        <th>Title</th>
        <th>End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Book_ticket</td>
        <td>x: y</td>
        <td>p: q</td>
      </tr>

    </tbody>
  </table>

For an example assume this is the data I got in Server side.

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
    
    var votes = [
      { title: 'Apple', votes: 1, enddate: 2/22/2020 },
      { title: 'Milk', votes: 2 ,  enddate: 1/2/2020},
      { title: 'Carrot', votes: 3,  enddate: 3/22/2020 },
      { title: 'Banana', votes: 2,  enddate: 1/22/2020 }
    ];

})();

Now from the server I want to pick the first array element and set in the table columns like

Serial Number should map to votes, title should map by title and enddate should map by end date

Answer 1

On your server, populate the global data object with data you want to pass to your HTML.

Server Script:

(function() {
  /* populate the 'data' object */  
  data.votes = [
    { title: 'Apple', votes: 1, enddate: 2/22/2020 },
    { title: 'Milk', votes: 2 ,  enddate: 1/2/2020},
    { title: 'Carrot', votes: 3,  enddate: 3/22/2020 },
    { title: 'Banana', votes: 2,  enddate: 1/22/2020 }
  ];
})();

Then, in your HTML, you can use the ng-repeat directive to iterate over the data.votes array. Using ng-repeat will allow you to create multiple instances of the table <tr> tags for each object within your array.

HTML Template:

<div class="panel panel-body">
  <h2>Book Rooms v1</h2>
  <table border="2" class="table m-b-lg">
    <thead>
      <tr>
        <th>Serial Number</th>
        <th>Title</th>
        <th>End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="vote in data.votes">
        <td>{{vote.votes}}</td>
        <td>{{vote.title}}</td>
        <td>{{vote.enddate}}</td>
      </tr>
    </tbody>
  </table>
</div>

See working example below:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.data = {};
    $scope.data.votes = [{
        title: 'Apple',
        votes: 1,
        enddate: '2/22/2020'
      },
      {
        title: 'Milk',
        votes: 2,
        enddate: '1/2/2020'
      },
      {
        title: 'Carrot',
        votes: 3,
        enddate: '3/22/2020'
      },
      {
        title: 'Banana',
        votes: 2,
        enddate: '1/22/2020'
      }
    ];
  });

angular.element(document).ready(() => {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-controller="myController">
  <h2>Book Rooms v1</h2>
  <table border="2" class="table m-b-lg">
    <thead>
      <tr>
        <th>Serial Number</th>
        <th>Title</th>
        <th>End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="vote in data.votes">
        <td>{{vote.votes}}</td>
        <td>{{vote.title}}</td>
        <td>{{vote.enddate}}</td>
      </tr>
    </tbody>
  </table>
</div>