JSON parser doesn't work with Angular ng-repeat

问题

I am trying to access json obj and set values into Angular Ui-grid.But the problem was that some of my json obj fields are json string.I tried to convert that fields into json obt using Json.parser and then try to access.But nothing can display and wont give any error message.

Json Obj

[  
   {  
      "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\":[\"g.g@gmail.com\"],\"extraParams\":{\"PlanFileName\":\"RestAPI.xml\"}}",
      "status":"active",
      "elapsedTime":"1 day ago"
   }
]

I tried to convert JobDetails field into json obj inside cell template.

var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.parse(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';

Complete Js 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();
                }

            });

Please let me know how can i access JobDetails inside ng-repeat and set into ui-grid.

回答1:

Create a method in scope

$scope.parseJSON=function(strObj){
  return JSON.parse(strObj);
}

Then call from template

var testPlantemplate ='<div><ul><li ng-repeat="testPlans in parseJSON(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';

JSFIDDLE

回答2:

can you try with stringify() then it escapes all of "/"...

    var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.stringify(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';

check this link...

http://speakingjs.com/es5/ch22.html

来源：https://stackoverflow.com/questions/33992413/json-parser-doesnt-work-with-angular-ng-repeat