I am trying to find a way to display the following JSON data in the form of list (UL, LI) using the ng-repeat and ng-if. But as a newbie to the Angular JS it looks complicated because of the JSON data structure below (schemaJsonData in the controller):
JSON data structure is :
Connections[
{ /* For each connection we have multiple databases*/
databases[
{ /* For each Database we have tables, view, storedProcedures adn functions*/
tables[
table[ /* For each table group of columns, indexes, etc */
columns[], indexes[], foreignKeys[], triggers[]
] /*end of table*/ ,
],/*end of tables*/
views [
], /*end of views*/
storedProcedures [
], /*end of storedProcedures*/
functions [
], /*end of functions*/
}
] /* end of databases */
}
] /* end of connections */
My code is as follows:
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="(key,value) in schemaData">
<div ng-if="isArray(value)">
</div>
<div ng-if="!isArray(value)">
<ul> {{value}} </ul>
</div>
<li >
<ul ng-if="isArray(value)">
{{value}}
</ul>
<ul ng-if="!isArray(value)">
{{value}}
</ul>
</li>
</ul>
</div>
<script src="lib/angular/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var schemaJsonData = {
"connectionName":"connection",
"connections":[
{
"name":"connection",
"databases":[
{
"name":"information_schema",
"tables":[
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
},
{
"name":"mysql",
"tables":[
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
},
{
"name":"performance_schema",
"tables":[
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
},
{
"name":"timetrack",
"tables":[
{
"name":"employee",
"columns":[
{
"name":"idemployee"
},
{
"name":"name"
},
{
"name":"salary"
},
{
"name":"age"
}
],
"indexes":[
],
"foreignKeys":[
],
"triggers":[
]
},
{
"name":"work",
"columns":[
{
"name":"id"
},
{
"name":"hours"
},
{
"name":"date"
},
{
"name":"archived"
},
{
"name":"description"
}
],
"indexes":[
],
"foreignKeys":[
],
"triggers":[
]
}
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
}
]
}
]
};
$scope.schemaData = schemaJsonData;
$scope.isArray = angular.isArray;
});
</script>
</body>
</html>
Problems are:
1) I can use the ng-repeat and ng-if and i am able to check is it array or not
2) But as the structure can change, I want to write a simple code to loop thru the JSON data and if it is Array, then loop thru array and same again (I mean, in the loop, if we get array again, then loop again).
