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\":[\"[email protected]\"],\"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>

Durgpal Singh · Accepted Answer · 2015-11-26 10:45:17Z

3

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\":[\"[email protected]\"],\"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>

answered Nov 26, 2015 at 10:45

Durgpal Singh

12k4 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gihan-maduranga Over a year ago

i edited my question please have a look.I fetch data using REST.I am a newbie for angular please let me know how can i achieve this.

Durgpal Singh Over a year ago

see my answer first you convert your string value to object then you can access it.

gihan-maduranga Over a year ago

I tried this way but nothing happen $scope.TestData = Service.query().map(function(value){ value.JobDetailParse = JSON.parse(value.JobDetails); return value; }); <div><ul><li ng-repeat="t in TestData">{{t.JobDetailParse.environment}}</li></ul></div>

notAChance Over a year ago

can you format your code in your comments by using `` ?

Durgpal Singh Over a year ago

$resource.query() returns a promise. i.e. at the time of binding it is not necessary that data has been fetched.

notAChance · Accepted Answer · 2015-11-26 10:19:02Z

2

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

newObj = JSON.parse(yourString);

Then use ng-repeat on it.

answered Nov 26, 2015 at 10:19

notAChance

1,4304 gold badges19 silver badges52 bronze badges

5 Comments

gihan-maduranga Over a year ago

I tried but still the same.I am trying to set data into UI-grid via REST service function($scope, Service) { $scope.TestData = Service.query(); data : 'TestData ',

notAChance Over a year ago

So now you are trying to send data? Your original question was about mapping within a JSON string. Are you trying to parse test data? IE JSON.parse(TestData) ?

gihan-maduranga Over a year ago

I am fetching data into grid using REST service.I edited my question Please have a look.

notAChance Over a year ago

Are you sure TestData is even on the scope? Where is test data? Is it in your controller/service?

notAChance Over a year ago

Since you are returning a promise, maybe a solution would be to JSON.parse(TestData) IN your Service.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related