使用 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"and "checkitemdesc”但我无法访问“answers": [{"fleetcheckitemid": "2","checkitemdesc": "Ok"},......值

在我的控制器中，我有以下代码，但是一旦我进入内部 .each() 循环，我就会收到错误消息：“TypeError: Cannot read 属性 'length' 未定义"

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 而不是 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
        });
    });

使用 AngularJS 从嵌套的 JSON 获取值

Getting values from nested JSON using AngularJS

javascript

each

json

angularjs