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 ”，但我无法访问“答案”：[{“fleetcheckitemid “：”2“，”checkitemdesc“：”Ok“}，......值

在我的控制器中，我有以下代码，但是当我点击内部.each（）循环时，我收到一个错误：“ TypeError：无法读取未定义的属性'length'”< / p>

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

您问题的其他解决方案。

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

对$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 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获取值

3 个答案: