Getting values from nested JSON using AngularJS

Question

I am looping through a nested JSON object and I get stuck at accessing the sub items.

Here is a sample of the JSON file I am using. It passes the JSONLint test so it can be assumed it is OK.

JSON

[{
    "fleetcheckitemid": "1",
    "checkitemdesc": "Engine oil level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}, {
    "fleetcheckitemid": "2",
    "checkitemdesc": "Water level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}, {
    "fleetcheckitemid": "3",
    "checkitemdesc": "Brake fluid level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}]

I can access the " fleetcheckitemid "and " checkitemdesc " but I am unable to access the " answers ": [{"fleetcheckitemid": "2","checkitemdesc": "Ok"},......values

In my controller I have the following code, but as soon as I hit the inner .each() loop I get an error: " TypeError: Cannot read property 'length' of undefined "

app.js

$http.get("http://mymadeupdomain/api/getfleetchecks.php?fleetid=" + $scope.newFleetIDValue).success(function(data) 
{
    $scope.data = data;
    console.log("$scope.data: " + $scope.data); // WORKING - [object Object], ... [object Object] 

    $scope.answersArray = [];
    console.log("$scope.answers: " + $scope.answers); // EMPTY ARRAY - NOT INITIALISED YET 

    // Unable to access sub-items (answers) here
    $.each($scope.data, function(index, element)
    {
       var itemDescription = element.checkitemdesc; 
       console.log("itemDescription: " + itemDescription); // WORKING - Engine Oil Level

       var fleetcheckitemid = element.fleetcheckitemid; 
       console.log("fleetcheckitemid: " + fleetcheckitemid); // WORKING - 1....34

        $.each(this.answers, function(index, element)
        {
            var answers = element.answers;

            var fleetcheckid = element.fleetcheckid;
            console.log("element.fleetcheckid: " + element.fleetcheckid); // NOT WORKING
            console.log("fleetcheckid: " + fleetcheckid); // NOT WORKING
        });
    });   
});

Where are I going wrong with this? Can it be the [] brackets around the answers in the JSON causing this?

Answer 1

other solution for your question.

 var app = angular.module("testApp", []); app.controller('testCtrl', function($scope){ $scope.data = [{ "fleetcheckitemid": "1", "checkitemdesc": "Engine oil level", "answers": [{ "fleetcheckid": "1", "checkvaluedesc": "Ok" }, { "fleetcheckid": "2", "checkvaluedesc": "Low" }, { "fleetcheckid": "3", "checkvaluedesc": "Top-Up Required" }] }, { "fleetcheckitemid": "2", "checkitemdesc": "Water level", "answers": [{ "fleetcheckid": "1", "checkvaluedesc": "Ok" }, { "fleetcheckid": "2", "checkvaluedesc": "Low" }, { "fleetcheckid": "3", "checkvaluedesc": "Top-Up Required" }] }, { "fleetcheckitemid": "3", "checkitemdesc": "Brake fluid level", "answers": [{ "fleetcheckid": "1", "checkvaluedesc": "Ok" }, { "fleetcheckid": "2", "checkvaluedesc": "Low" }, { "fleetcheckid": "3", "checkvaluedesc": "Top-Up Required" }] }]; angular.forEach($scope.data,function(value,key){ console.log(value.fleetcheckitemid); console.log(value.checkitemdesc); angular.forEach(value.answers,function(v,k){ console.log(v.fleetcheckid); console.log(v.checkvaluedesc); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="testApp" ng-controller="testCtrl"> </div> 

Answer 2

Do make for loop over $scope.answers instead of this.answers . Then do change the $.each 2nd parameter name which is the same as outer element variable. So when control in coming inside a function the

$.each($scope.answers, function(index, ele) {//also change variable here
   var answers = element.answers;
   var fleetcheckid = element.fleetcheckid;
   console.log("element.fleetcheckid: " + element.fleetcheckid);
   console.log("fleetcheckid: " + fleetcheckid); // NOT WORKING
}

Still not sure, how you are filling up values in $scope.answers ?

Answer 3

 angular.forEach($scope.data, function(data1){
       console.log("fleetcheckitemid: " + data1.fleetcheckitemid); // WORKING - 1....34

        angular.forEach(data1.answers, function(data2)
        {
            console.log("element.fleetcheckid: " + data2.fleetcheckid); // NOT WORKING
            console.log("DESC: " + data2.checkvaluedesc); // NOT WORKING
        });
    });