I am facing an issue with accessing JSON objects and setting values into Angular Ui-grid. The problem arises when some of the fields in my JSON object are actually JSON strings. I attempted to convert these fields into JSON objects using JSON.parser, but encountered a situation where no data was displayed and no error message was generated.
JSON Object
[
{
"jobId":"efe0ace0-8ed9-45ff-9232-974cbdc89b86",
"jobType":"TestJob",
"nextRun":"N/A",
"lastRun":"2015-11-26 13:26:10.664",
"createdDate":"2015-11-26 13:26:10.664",
"executor":"g",
"JobDetails":"{\"environment\":\"TQ\",\"additionalEmailRecipients\":[\"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1770397057707a767e7b3974787a">[email protected]</a>\"],\"extraParams\":{\"PlanFileName\":\"RestAPI.xml\"}}",
"status":"active",
"elapsedTime":"1 day ago"
}
]
I made an attempt to convert the JobDetails field into a JSON object inside the cell template.
var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.parse(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';
Complete JavaScript Script
'use strict';
var tepTableModule = angular.module('test',
[ 'ngAnimate', 'ngTouch','ui.grid','ngResource' ]).factory('Service',
function($resource) {
return $resource('/api/job/jobs', {});
});
tepTableModule
.controller(
'tepTableCtrl',
function($scope, Service) {
$scope.TestData = Service.query();
//This doesn't work
var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.parse(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';
$scope.tableData = {
data : 'TestData',
groupsCollapsedByDefault : true,
enablePinning : true,
columnDefs : [ {
field : 'jobId',
displayName : 'jobId',
visible : false
}, {
field : 'JobDetails',
displayName : 'Test Plan Name',
cellTemplate : testPlantemplate,
visible : true
},
{
field : 'jobType',
displayName : 'JobType',
visible : true
},
{
field : 'environment',
displayName : 'Environments',
visible : true
},
{
field : 'status',
displayName : 'Status',
visible : true
},
{
field : 'elapsedTime',
displayName : 'LastRun',
visible : true
},
{
field : 'JobDetails.additionalEmailRecipients',
displayName : 'Email Recipients',
visible : true
},
{
field : 'executor',
displayName : 'Executor',
visible : true
}
],
sortInfo: {
fields: ['elapsedTime'],
directions: ['desc']
},
plugins : [ new ngGridAutoRowHeightPlugin() ]
};
$scope.changeGroupBy = function(group) {
$scope.gridOptions.groupBy(group);
}
$scope.clearGroupBy = function() {
$scope.gridOptions.$gridScope.configGroups = [];
$scope.gridOptions.groupBy();
}
});
I would appreciate any advice on how to access the JobDetails within the ng-repeat and set it into the UI grid successfully.