AngularJSを使用してネストされたJSONから値を取得する

Question

ネストされたJSONオブジェクトをループしていて、サブアイテムにアクセスできません。

ここに私が使用しているJSONファイルのサンプルがあります。これはJSONLintテストに合格し、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" 
    }] 
}] 

私は "はをfleetcheckitemid "と" checkitemdesc" が、私は "答え "にアクセスすることができませんアクセスすることができます：[{" fleetcheckitemidを"：「2 "、" checkitemdesc "：" Ok "}、......値

私のコントローラには次のコードがありますが、内側の.each（）ループを叩くとエラーが表示されます： Ty peErrorは：未定義「

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

this.answersの代わりに$scope.answersを超えるループを作成します。次に、element変数と同じ第2パラメータ名$.eachを変更します。だから、ときに、関数の内部で来るのが制御

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