使用 AngularJS 从嵌套 JSON 中获取值

Question

我正在循环访问一个嵌套的 JSON 对象，但在访问子项目时遇到了困难。

这是我正在使用的 JSON 文件的示例。它通过了 JSONLint 测试，因此可以假定它没问题。

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"
    }]
}]

我可以访问“fleetcheckitemid”和“checkitemdesc”，但无法访问“answers”：[{"fleetcheckitemid ": "2","checkitemdesc": "Ok"},......值

在我的控制器中，我有以下代码，但是当我点击内部 .each() 循环时，我得到一个错误：“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
        });
    });   
});

我在哪里做错了？是否是 JSON 中答案周围的 [] 括号导致了这种情况？

Answer 1

请在 $scope.answers 上进行 for 循环，而不是 this.answers。然后更改$.each 第二个参数名称，它与外部element 变量相同。所以当控制进入一个函数时

$.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
}

仍然不确定，您是如何填写 $scope.answers 中的值的？

Answer 2

您问题的其他解决方案。

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 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
        });
    });