How to access Json object element values if it is a json string in Angular

Question

I persist some DB table column values as json string and later on send DB table values as a json object into front end.

[  
   {  
      "jobId":"efe0ace0-8ed9-45ff-9232-974cbdc89b86",
      "jobType":"TestExecutionJob",
      "nextRun":"N/A",
      "lastRun":"2015-11-26 13:26:10.664",
      "createdDate":"2015-11-26 13:26:10.664",
      "executor":"sam",
      "JobDetails":"{\"environment\":\"AA\",\"EmailRecipients\":[\"sam.sam11@gmail.com\"],\"extraParams\":{\"FileName\":\"myTest.xml\"}}",
      "status":"active",
      "elapsedTime":"18 minutes ago"
   }
]

I have tried with angularJs ng-repeat but nothing display.Please let me know how can i access JobDetails values.(environment,EmailRecipients and FileName)

<ul><li ng-repeat="t in row.entity.JobDetails">{{t.environment}}</li></ul>

Js File

'use strict';
var tepTableModule = angular.module('test',
        [ 'ngAnimate', 'ngTouch','ui.grid','ngResource' ]).factory('Service',
        function($resource) {
            return $resource('/api/jobs', {});
        });

    tepTableModule
    .controller(
            'tepTableCtrl',
            function($scope, Service) {
                $scope.TestData = Service.query();

                var Plantemplate ='<div><ul><li ng-repeat="t in row.entity.JobDetails">{{t.FileName}}</li></ul></div>';

                $scope.tableData = {
                    data : 'TestData',

                    groupsCollapsedByDefault : true,


                    enablePinning : true,
                    columnDefs : [ {
                        field : 'jobId',
                        displayName : 'jobId',
                        visible : false
                    },  {
                        field : 'JobDetails',
                        displayName : 'Plan Name',
                        cellTemplate : Plantemplate,
                        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.EmailRecipients',
                        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();
                }

            });

HTML

<div ng-controller="tepTableCtrl">
    <div  ui-grid="tableData" class="grid"></div>
 </div>

Answer 1

first parse string to object and then use it

<script>
 var app = angular.module('myApp', []);
    app.controller('myCtrl', ['$scope', function($scope) {

     $scope.json = [  
         {  
            "jobId":"efe0ace0-8ed9-45ff-9232-974cbdc89b86",
            "jobType":"TestExecutionJob",
            "nextRun":"N/A",
            "lastRun":"2015-11-26 13:26:10.664",
            "createdDate":"2015-11-26 13:26:10.664",
            "executor":"sam",
            "JobDetails":"{\"environment\":\"AA\",\"EmailRecipients\":[\"sam.sam11@gmail.com\"],\"extraParams\":{\"FileName\":\"myTest.xml\"}}",
            "status":"active",
            "elapsedTime":"18 minutes ago"
         }
      ].map(function(value){
         value.JobDetailParse = JSON.parse(value.JobDetails);
         return value;
      })

    }]);

</script>

Html :

<div ng-repeat = "t in json">
    {{t.JobDetailParse.environment}}
  </div>

Answer 2

Why not parse the data, IE turn it from string to object?

newObj = JSON.parse(yourString);

Then use ng-repeat on it.