AngularJSでネストされたJSONを表示

Question

私はAngularJS、Onsen UI、Monacaで開発されたクロスプラットフォームアプリを持っています。

自分のページの1つで、入れ子になったJSONオブジェクトを返すAPI呼び出しを行います。私は$ http.get（）を使ってJSONオブジェクトを読むことができ、JSONをループして高レベルの項目を表示することができますが、ネストされた項目を表示することはできません。

私がしたいのは、高レベルの項目をテキストフィールドとして表示し、上位の各項目のラジオボタンとしてネストされた項目を表示することです。ラジオボタンとテキストフィールドとして

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

そして、私は果物の名前を表示したい私のfruit.htmlページ（itemDescription）中：

私のJSONファイルの例は、このようになります「fruitDescription」アイテムのそれぞれについてそれらの下に表示されます。

次のように私のfruit.htmlページが見えます：私が好きな私は、リストに果物名以上のディスプレイを実行したときに、私は何を得る

<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> 

が、それぞれの果物の項目について1しかありラジオボタンが表示された後、JSONフォーマットコード

• アップル
• （ここでは表示のみ1ラジオボタン）
• [{ "fruitCheckID"： "1"、 "fruitDescription"： "OK"}、{ "fruitCheckID"： "2"、 " fruitDescription "：『fruitCheckID』、{}『熟していない』：『3』、『fruitDescription』：『腐った』}]

項目は私にどのように表示されるか、そのリストで3番目の箇条書きが実際にあります。

私のapp.js私は以下のようにJSONオブジェクトを取得し、console.log（）でJSONオブジェクトをすべて表示する必要があります。

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

ネストされた値を表示する形式が間違っている場所を教えていただけますか？

Answer 1

は、あなたの質問はあまりにもその答えを持ってい

<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>