I have an array of objects in my server script.How to access that array in html template in servicenow widgets?

[Avik Kumar Dutt]

I have an array of objects in my server script.How to access that array in html template in servicenow widgets?

Thanks and Regards in advance.

[Harsh Vardhan]

i am adding sample code here. which i have tested and i am getting an array result from server side to html. 

HTML

<div>
  <table class="table">
  <thead>
    <tr>
      <th>Number</th>
      <th>Short Description </th>
      <th>Last Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="incident in data.incidents">
      <td>{{incident.number}}</td>
      <td>{{incident.short_description}}</td>
      <td>{{incident.sys_updated_on}}</td>
    </tr>
  </tbody>
</table>
</div>

Server Script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.incidents = [];
var gr = new GlideRecord('incident');
gr.addActiveQuery();
gr.setLimit(10);
gr.orderByDesc('sys_updated_on');
gr.query();
while(gr.next()){
var incident = {};
incident.number=gr.getDisplayValue('number');
incident.short_description=gr.getDisplayValue('short_description');
incident.sys_id=gr.getUniqueValue();
incident.sys_updated_on=gr.getValue('sys_updated_on');
data.incidents.push(incident);
}
	

})();

Hope it will help you, same way you can run the above script , make some changes  based on your requirement. 

[Paul38]

Hello,

You will need to pass the array to the data variable in the Server Script, by creating a new property, for example:

data.groups = ["ServiceDesk","Networking","Database"];

Then in the HTML Template you can access it using Angular directives like ng-repeat:

 <div ng-repeat="group in data.groups">

or display it directly

<div>
  My array {{data.groups}}
</div>

Let me know if this was helpful or if you have further questions.

Regards,

Paul

[Brandon Barret1]

So you have an array in your Server side code that you want to access in the html of a widget? That is easy enough. Say I have an array called tasks that holds a collection of task objects. If I want to bind those values and display all of them in my html template, all I need to do is this:

<div ng-repeat="(key, value) in myObj"> ... </div>

real-world todo app example from the todo task app I created:

  <div class="list=group" style="text-align:center;" >
      <a class="list-group-item" ng-repeat="task in c.data.tasks">
        <input class="pull-left" type="checkbox" model="checkbox" ng-click="removeRecord(i)">
        <div class="m-l-lg">
          <div class="text-primary">Project:{{task.todo}} 				
             Due Date: {{task.date}} <span ng-class="{'color-brown': todo.category === 'Work','color-red': todo.category === 'critical',  'color-blue': todo.category === 'Tech', 'color-green': todo.category === 'Personal'}">{{task.category}}</span>
          </div>
        </div>
      </a>
    </div>
  </div>

The "ng-repeat" directive in my list-group-item allows me to access all of the elements in that array that is server side, and map out each bound value in my html template. It basically acts as a for loop.

more info:

https://docs.angularjs.org/api/ng/directive/ngRepeat