I am in the process of developing a user interface that is dynamically generated based on the server response. I need to iterate to determine the number of tabs to be created and then iterate again to determine the amount of content to be placed within each tab. While I am able to generate the correct number of tabs, I am encountering issues with the number of inputs being generated. The JSON structure I am working with is as follows:
{
"data": {
"APIVersion": "2.0",
"toplevelcontainer": [
{"label": "value1", "type": "tabs", "key": "value1", "tooltip": "value1", "defaultValue": "value1",
"content" : {
"innercontent": [
{"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"},
{"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"},
{"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"},
{"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"}
]
}
},
{"label": "value2", "type": "tabs", "key": "value2", "tooltip": "value2", "defaultValue": "value2",
"content" : {
"innercontent": [
{"label": "tab2", "type": "input", "key": "value2","tooltip": "value2","defaultValue": "value2"}
]
}
},
{"label": "value3", "type": "tabs", "key": "value3","tooltip": "value3","defaultValue": "value3",
"content" : {
"innercontent": [
{"label": "tab2", "type": "input", "key": "value2","tooltip": "value2","defaultValue": "value2"}
]
}
}
]
}
}
I am now considering whether to utilize angular.forEach or ng-repeat. My forEach loop is structured as follows:
angular.forEach(data.data, function(top) {
$scope.containers = top;
angular.forEach(data.data.toplevelcontainer, function(lower) {
$scope.inputs = lower;
})
});
UPDATE: incorporating the ng-repeat method app.controller('TabController', function($scope, $http){
$http.get('data.json')
.success(function(data) {
$scope.containers = data.data.toplevelcontainer;
$scope.inputs = data.data.toplevelcontainer.content; //do I need to create a scope variable for each of these items I want to insert into the DOM?
})