I am currently attempting to iterate through a JSON array and display the values on the frontend of my application. I have provided my code, but I'm having trouble retrieving specific values (startDate, endDate) from within the array and displaying them correctly.
JSON
"reportTypeObligationTypes": [{
"reportTypeId": null,
"consolidationScopeId": 4009,
"startDate": "2014-01-01",
"endDate": "9999-12-31",
"frequencyCode": "Q",
"reportTypeLabel": null,
"reportTypeCode": null,
"consolidationScopeCode": "C",
"frequencyLabel": "Quarterly"
}]
Angular controller
xxxApp.controller('reportListController', function ($scope, $http, $location, $routeParams) {
var service_url = "/mdmservice/services/reportTypeEntities/" + $routeParams.id;
$http.get(service_url).success(
function (data, status, headers, config) {
$scope.reportTypeEntities = data;
angular.forEach($scope.reportTypeEntities, function (item) {
console.log(item.reportTypeObligationTypes);
})
});
$scope.gridOptions = {
paginationPageSizes: [25, 50, 100, 200, 300, 400, 500, 1000],
paginationPageSize: 25,
};
$scope.gridOptions.data = 'reportTypeEntities';
$scope.gridOptions.enableFiltering = true;
$scope.gridOptions.enableGridMenu = true;
$scope.gridOptions.fastWatch = true;
$scope.gridOptions.columnDefs = [{
name: "entityName",
width: "35%",
cellTemplate: '<div style="margin-left: 5px;">' + ' <a href="#edit/{{row.entity.entityId}}">{{row.entity.entityName}}</a>' + '</div>'
}, {
name: "entityCode",
width: "15%"
}, {
name: "codeType"
}, {
name: "Entity Type",
field: "entityType.entityTypeName"
}, {
name: "reportingId"
}, {
name: "Country",
field: "country.countryName"
}, {
name: "startDate",
field: "reportTypeObligationTypes.startDate"
}, {
name: "endDate",
field: "reportTypeObligationTypes.endDate"
}, {
name: "consolidationScopeCode",
field: "reportTypeObligationTypes.consolidationScopeCode"
}, {
name: "frequencyLabel",
field: "reportTypeObligationTypes.frequencyLabel"
}, {
name: "Delete",
cellTemplate: '<div style="margin-left: 5px;">' + ' <a href="#delete/{{row.entity.entityId}}" class="glyphicon glyphicon-trash btn btn-danger"> Delete</a>' + '</div>',
enableFiltering: false,
enableSorting: false
}];
})
HTML Page - Angular UI grid
<div ng-app="xxxApp" ng-controller="reportListController">
<p class="heading">Entities with Reporting Obligation</p>
<!-- Entities list data table using - 'ui-grid' module -->
<div ui-grid="gridOptions" class="myGrid" ui-grid-pagination
ui-grid-selection ui-grid-resize-columns ui-grid-move-columns
ui-grid-cellNav ui-grid-exporter></div>