JSON 解析器不适用于 Angular ng-repeat [英] JSON parser doesn't work with Angular ng-repeat

问题描述

我正在尝试访问 json obj 并将值设置为 Angular Ui-grid.但问题是我的一些 json obj 字段是 json 字符串.我尝试使用 Json.parser 将该字段转换为 json obt，然后尝试访问.但什么都不能显示，也不会给出任何错误消息.

Json 对象

<预><代码>[{"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","执行者":"g","JobDetails":"{\"environment\":\"TQ\",\"additionalEmailRecipients\":[\"[e-mail]\"],\"extraParams\":{\"PlanFileName\":\"RestAPI.xml\"}}","状态":"活动","elapsedTime":"1 天前"}]

我尝试将 JobDetails 字段转换为单元格模板内的 json obj.

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

完整的 Js 脚本

'use strict';var tepTableModule = angular.module('test',['ngAnimate', 'ngTouch','ui.grid','ngResource']).factory('Service',功能($资源){return $resource('/api/job/jobs', {});});tepTable模块.控制器('tepTableCtrl',功能($范围，服务){$scope.TestData = Service.query();//这不起作用var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.parse(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';$scope.tableData = {数据:'测试数据'，groupsCollapsedByDefault : 真,enablePinning : 真,列定义: [ {字段:'jobId'，显示名称:'jobId'，可见:假}, {字段:'工作详细信息'，displayName : '测试计划名称',cellTemplate : testPlantemplate,可见:真实},{字段:'工作类型'，显示名称:'工作类型'，可见:真实},{字段:'环境'，displayName : '环境',可见:真实},{字段:'状态'，显示名称:'状态'，可见:真实},{字段:'经过时间'，显示名称:'上次运行'，可见:真实},{字段:'JobDetails.additionalEmailRecipients'，displayName : '电子邮件收件人',可见:真实},{字段:'执行者'，displayName : '执行者',可见:真实}],排序信息:{字段:['elapsedTime']，方向:['desc']},插件:[新的ngGridAutoRowHeightPlugin()]};$scope.changeGroupBy = 函数(组){$scope.gridOptions.groupBy(group);}$scope.clearGroupBy = function() {$scope.gridOptions.$gridScope.configGroups = [];$scope.gridOptions.groupBy();}});

请告诉我如何访问 ng-repeat 中的 JobDetails 并设置为 ui-grid.

解决方案

在作用域内创建方法

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

然后从模板调用

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

JSFIDDLE

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\":[\"[e-mail]\"],\"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.

解决方案

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

这篇关于JSON 解析器不适用于 Angular ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！