Verschachtelte JSON in AngularJS anzeigen

Question

Ich habe eine Cross-Plattform-App entwickelt in AngularJS, Onsen UI und Monaca.

Auf einer meiner Seiten mache ich einen API-Aufruf, der ein verschachteltes JSON-Objekt an mich zurückgibt. Ich kann das JSON-Objekt mit $ http.get() lesen, und ich kann den JSON durchlaufen und die High-Level-Elemente anzeigen, aber ich kann die verschachtelten Elemente nicht anzeigen.

Was ich tun möchte, ist die High-Level-Elemente als ein Textfeld anzuzeigen und dann die verschachtelten Elemente als Optionsfeld für jedes der High-Level-Elemente anzuzeigen. etwa wie folgt aussehen

Ein Beispiel für meine JSON-Datei würde:

[{ 
    "itemID": "1", 
    "itemDescription": "Apple", 
    "options": [{ 
     "fruitCheckID": "1", 
     "fruitDescription": "Ok" 
    }, { 
     "fruitCheckID": "2", 
     "fruitDescription": "Not Ripe" 
    }, { 
     "fruitCheckID": "3", 
     "fruitDescription": "Rotten" 
    }] 
}, { 
    "itemID": "2", 
    "itemDescription": "Orange", 
    "options": [{ 
     "fruitCheckID": "1", 
     "fruitDescription": "Ok" 
    }, { 
     "fruitCheckID": "2", 
     "fruitDescription": "Not Ripe" 
    }, { 
     "fruitCheckID": "3", 
     "fruitDescription": "Rotten" 
    }] 
}] 

Und in meinem fruit.html Seite möchte ich die die Obstnamen (ItemDescription) als Textfelder mit Radio-Buttons angezeigt werden unter ihnen für jede der "fruitDescription" -Elemente.

Mein fruit.html Seite sieht wie folgt aus:

<ul class="list"> 
    <li class="list__item" ng-repeat="checkItemDescription in data"> 
     <span class="list__item__line-height"><strong>{{checkItemDescription.itemDescription}}</strong></span> <!-- WORKING HERE --> 

     <label class="checkbox"> 
      <input type="checkbox" 
       ng-click="toggleSelection(checkItemDescription.itemDescription)"> 
      <div class="checkbox__checkmark"></div> 
      {{checkItemDescription.options}} <!-- NOT WORKING HERE --> 
     </label> 
    </li> 
</ul> 

Was bekomme ich, wenn ich die oben zeigt die Früchte Namen in einer Liste laufen, wie ich will, aber für jede Frucht Artikel ist nur 1 Radiobutton angezeigt und dann JSON-formatierten Code eg

• Apple-
• (Nur 1 Optionsfeld hier angezeigt)
• [{ "fruitCheckID": "1", "fruitDescription": "Ok"}, { "fruitCheckID": "2", " fruitDescription ": "nicht reif"}, { "fruitCheckID": "3", "fruitDescription": "Rotten"}]

Wo der dritte Aufzählungspunkt in dieser Liste ist tatsächlich, wie die Einzelteile zu mir angezeigt .

In meiner app.js bekomme ich das JSON-Objekt wie unten und wenn ich console.log() das JSON-Objekt sein alle anzeigen, wie es sollte.

// Loop through the JSON [object Object]...[object Object] returned from API call 
angular.forEach($scope.data, function(value, key) 
{ 
    // WORKING 
    console.log("Item ID: " + value.itemID); 
    console.log("Item Description: " + value.itemDescription); 

    // Inner loop to return nested JSON objects 
    angular.forEach(value.options, function(v, k) 
    { 
     // WORKING 
     console.log("Fruit Check ID: " + v.fruitCheckID); 
     console.log("Fruit Description: " + v.fruitDescription); 
    }); 
}); 

Kann mir jemand sagen, wo ich mit dem Format der Anzeige der verschachtelten Werte falsch liege?

Answer 1

Versuchen Sie diesen Code verwenden ..

<ul class="list"> 
<li class="list__item" ng-repeat="checkItemDescription in data"> 
    <span class="list__item__line-height"><strong> {{checkItemDescription.itemDescription}}</strong></span> <!-- WORKING HERE --> 

    <label class="checkbox"> 
     <input type="checkbox" 
      ng-click="toggleSelection(checkItemDescription.itemDescription)"> 
     <div class="checkbox__checkmark" ng-repeat="options in data.options "></div><!-- use ng-repeat here --> 
     {{options.fruitDescription}} 
    </label> 
</li>