Displaying nested JSON in AngularJS

Question

I have a cross platform app developed in AngularJS, Onsen UI and Monaca.

On one of my pages I make a API call that returns a nested JSON object to me. I can read the JSON object using $http.get() and I can loop through the JSON and display the high level items, but I cant seem to display the nested items.

What I want to do is display the high level items as a text field and then display the nested items as radio button for each of the high level items.

An example of my JSON file would look something like this:

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

And in my fruit.html page I want to display the the fruit names (itemDescription) as a text fields with radio buttons below them for each of the "fruitDescription" items.

My fruit.html page looks as follows:

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

What I get when I run the above displays the fruit names in a list as I want, but for each fruit item there is only 1 radio button displayed and then the JSON formatted code e.g.

• Apple
• (Only 1 radio button displayed here)
• [{"fruitCheckID": "1", "fruitDescription": "Ok" }, { "fruitCheckID": "2", "fruitDescription": "Not Ripe" }, { "fruitCheckID": "3", "fruitDescription": "Rotten" }]

Where the 3rd bullet point in that list is actually how the items are displayed to me.

In my app.js I get the JSON object as below and when I console.log() the JSON object its all displaying as it should.

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

Can anyone tell me where I am going wrong with the format of displaying the nested values?

Answer 1

Try using this code..

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