Abrufen von Werten aus geschachtelten JSON mit AngularJS

Question

Ich durchlaufe ein verschachteltes JSON-Objekt, und ich stehe beim Zugriff auf die Unterelemente fest.

Hier ist ein Beispiel der JSON-Datei, die ich verwende. Es besteht den JSONLint-Test, so dass davon ausgegangen werden kann, dass es in Ordnung ist.

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

Ich kann die "fleetcheckitemid "zugreifen und diese" checkitemdesc" aber ich bin nicht in der Lage, um die "antwortet ": [{" fleetcheckitemid": „2 "," checkitemdesc ":" Ok "}, ...... Werte

In meinem Controller habe ich den folgenden Code, aber sobald ich die innere .each() - Schleife erhalte, erhalte ich einen Fehler:" Ty peError: Kann nicht lesen Eigenschaft 'Länge' undefinierter "

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

wo ich mit diesem falsch gehen? Kann es die [] Klammern um die Antworten im JSON sein, die das verursachen?

Answer 1

andere Lösung für Ihre Frage.

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

Machen Sie für Schleife über $scope.answers statt this.answers. Ändern Sie dann den zweiten Parameternamen $.each, der der äußeren Variablen element entspricht. Also, wenn die Steuerung in innerhalb einer Funktion kommt der

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

Immer noch nicht sicher, wie Sie Werte in $scope.answers füllen sich?

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