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 eg
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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.