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

Deadly 提交于 2020-03-28 06:40:31

问题


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


回答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>


来源:https://stackoverflow.com/questions/60825934/how-to-pass-values-from-server-to-html-in-servicenow-service-portal

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!