如何访问JSON对象的元素值如果是在角JSON字符串 [英] How to access Json object element values if it is a json string in Angular
本文介绍了如何访问JSON对象的元素值如果是在角JSON字符串的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我坚持一些数据库表中的列值作为JSON字符串，稍后发送DB表值作为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，
执行人：山姆，
\"JobDetails\":\"{\\\"environment\\\":\\\"AA\\\",\\\"EmailRecipients\\\":[\\\"sam.sam11@gmail.com\\\"],\\\"extraParams\\\":{\\\"FileName\\\":\\\"myTest.xml\\\"}}\",
状态：积极的，
elapsedTime：19分钟前
}
]
我曾尝试与angularJs NG-重复但没有display.Please让我知道如何访问 JobDetails 值（环境，EmailRecipients和文件名）
＆LT; UL＆GT;＆LT;李NG重复=吨row.entity.JobDetails＆GT; {{t.environment}}＆LT; /李＆GT;＆LT; / UL＆GT ;
JS文件
使用严格的;
VAR tepTableModule = angular.module（测试，
['ngAnimate'，'ngTouch'，'ui.grid'，'ngResource']）。工厂（'服务'，
功能（$资源）{
返回$资源（'/ API /工作'，{}）;
}）; tepTableModule
.controller（
tepTableCtrl'，
功能（$范围，服务）{
$ scope.TestData = Service.query（）; VAR Plantemplate ='＆LT; DIV＆GT;＆LT; UL＆GT;＆LT;李NG重复=吨row.entity.JobDetails＆GT; {{t.FileName}}＆LT; /李＆GT;＆LT; / UL＆GT;＆LT; / DIV＆GT;'; $ scope.tableData = {
数据：TESTDATA， groupsCollapsedByDefault：真实，
enablePinning：真实，
columnDefs：[{
现场：'的jobId'，
显示名：的jobId'，
可见：假的
}，{
现场：JobDetails'，
显示名：计划名称，
cellTemplate：Plantemplate，
可见：真
}，
{
现场：jobType'，
显示名：JobType'，
可见：真
}，
{
现场：环境，
显示名：'环境'，
可见：真
}，
{
现场：状态，
显示名：状态，
可见：真
}，
{
现场：elapsedTime，
显示名：LASTRUN'，
可见：真
}，
{
现场：JobDetails.EmailRecipients'，
显示名：电子邮件收件人，
可见：真
}，
{
现场：遗嘱执行人，
显示名：执行人，
可见：真
}
]
的SortInfo：{
字段：['elapsedTime']，
方向：['说明']
}，
插件：[新ngGridAutoRowHeightPlugin（）]
}; $ scope.changeGroupBy =功能（组）{
$ scope.gridOptions.groupBy（组）;
}
$ scope.clearGroupBy =功能（）{
$ scope.gridOptions $ gridScope.configGroups = [];
$ scope.gridOptions.groupBy（）;
} }）;
HTML
＆LT; DIV NG控制器=tepTableCtrl＆GT;
＆LT;格UI格=资料表级=网格＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
解决方案
首先解析字符串对象，然后用它
＆LT;脚本＆GT;
VAR应用= angular.module（'对myApp'，[]）;
app.controller（'myCtrl'，['$范围'，函数（$范围）{ $ 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，
执行人：山姆，
\"JobDetails\":\"{\\\"environment\\\":\\\"AA\\\",\\\"EmailRecipients\\\":[\\\"sam.sam11@gmail.com\\\"],\\\"extraParams\\\":{\\\"FileName\\\":\\\"myTest.xml\\\"}}\",
状态：积极的，
elapsedTime：19分钟前
}
] .MAP（函数（值）{
value.JobDetailParse = JSON.parse（value.JobDetails）;
返回值;
}） }]）;＆LT; / SCRIPT＆GT;
HTML：
＆LT; DIV NG重复=吨JSON＆GT;
{{t.JobDetailParse.environment}}
＆LT; / DIV＆GT;
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-repeatbut nothing display.Please let me know how can i accessJobDetails 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>
解决方案
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>
这篇关于如何访问JSON对象的元素值如果是在角JSON字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
