Angular JS ng-repeat with complicated JSON Data (arrays, sub arrays, sub objects)

Question

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

I don't think you can do that with just templates. I fear you may have to inject the elements by javascript. — Muli Yulzary, Jan 13 '16 at 00:24
@MuliYulzary You mean to say, we have create a directive and link the element and do it — user3278897, Jan 13 '16 at 00:26
I've never used nested directives so I have no clue, sorry. This is 100% doable in pure js though. let me know if nested directives worked for you. — Muli Yulzary, Jan 13 '16 at 00:29
is your template will only consist ul>li>ul>li ... I saw some divs why you need it.. if you define template we can help you better... — Poyraz Yilmaz, Jan 13 '16 at 00:31
@PoyrazYilmaz I just need ul>li nested, that code above is from my in-between work. If that is moving away to help me, i will remove the div tags. But all i want is, ul>li nested dynamically. — user3278897, Jan 13 '16 at 00:33
@MuliYulzary angular is javascript...so of course it is doable. @user3278897 do a search for `angular recursive` will find plenty of results — charlietfl, Jan 13 '16 at 00:55
@charlietfl I thought perhaps the digest cycle will cause problems or some other background thing related to angular. — Muli Yulzary, Jan 13 '16 at 14:46

score 1 · Answer 1 · edited May 23 '17 at 11:44

I searched for a while to answer my question, honestly Angular JS is making the things complicated and interesting at the same time. At last, i found few solutions to problem, I am updating as answer so, it can be helpful for others like me:

First of all thanks to Poyraz Yilmaz and also, Muli Yulzary (He is interested how to solve this problem :) )

Solution:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var schemaJsonData =[{
      "name": "myConnection",
      "databases": [{
        "name": "informationDB",
        "tables": [{
          "name": "info",
        }, {
          "name": "table2",
        }]
      }]
    },{
      "name": "yourConnection",
      "databases": [{
        "name": "empDB",
        "tables": [ {
          "name": "employee",
          "columns": [
            {"name": "empsalary"},
            {"name": "abc"},
            {"name": "def"},
          ]
        }]
      }]
    }];        
  $scope.schemaData = schemaJsonData;
  $scope.isString = angular.isString;
  $scope.isNumber = angular.isNumber;
  $scope.isArray = angular.isArray;  
  $scope.isObject =  angular.isObject;
  $scope.searchKeyword = [];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <!-- <link rel="stylesheet" href="style.css" /> -->
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input type="text" placeholder="Search" ng-model="searchKeyword">
    <ul>
     <li ng-repeat="(key, item) in schemaData" ng-include="'list.html'">
      </li>
    </ul>
  </body>
  
  <script type="text/ng-template" id="list.html">
    <div ng-if="isObject(item)">
        <div ng-repeat="(key1, item1) in item">       
          <div ng-if="key1 == 'name'">
              <li>{{item1}}</li>
          </div>
          <div ng-if="isArray(item1)">
            <ul ng-repeat="(key, item) in item1" ng-include="'list.html'">
            </ul>
          </div>                 
        </div>  
    </div>
    
    <div ng-if="!isArray(item)">
    </div>
        
</script>

</html>

Guys this another good link to know the Angular JS recursive.

Angular JS ng-repeat with complicated JSON Data (arrays, sub arrays, sub objects)

1 Answers1