title: create dynamic nested json objects using recursive
body: <p>I have following JSON.</p>
  
  <pre><code>[{
      "ID": "Root_1",
      "Name": "Root_1",                   
      "ParentID": "",
      "Sequent": 1
  },
  {
      "ID": "Root_2",
      "Name": "Root_2",                   
      "ParentID": "",
      "Sequent": 2
  },              
  {
      "ID": "Root_1_Sub_1_Child_1",
      "Name": "Root_1_Sub_1_Child_1",                 
      "ParentID": "Root_1_Sub_1",
      "Sequent": 1
  },
  {
      "ID": "Root_1_Sub_1_Child_2",
      "Name": "Root_1_Sub_1_Child_2",                 
      "ParentID": "Root_1_Sub_1",
      "Sequent": 2
  },
  {
      "ID": "Root_1_Sub_1",
      "Name": "Root_1_Sub_1",                 
      "ParentID": "Root_1",
      "Sequent": 1
  }]
  </code></pre>
  
  <p>I want to change my JSON to as following.</p>
  
  <pre><code>[{
      "ID": "Root_1",
      "Name": "Root_1",
      "ParentID": "",
      "Sequent": 1,
      "Sub": [{
          "ID": "Root_1_Sub_1",
          "Name": "Root_1_Sub_1",
          "ParentID": "Root_1",
          "Sequent": 1,
          "Sub": [{
              "ID": "Root_1_Sub_1_Child_1",
              "Name": "Root_1_Sub_1_Child_1",
              "ParentID": "Root_1_Sub_1",
              "Sequent": 1            
          },
          {
              "ID": "Root_1_Sub_1_Child_2",
              "Name": "Root_1_Sub_1_Child_2",
              "ParentID": "Root_1_Sub_1",
              "Sequent": 2            
          }]
      }]
  },
  {
      "ID": "Root_2",
      "Name": "Root_2",                   
      "ParentID": "",
      "Sequent": 2
  }]
  </code></pre>
  
  <p>After I trying following way, the result is not what I want.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script src="./bower_components/angular/angular.min.js"&gt;&lt;/script&gt;       
      &lt;script&gt;
              angular.module('myApp', [])
              .controller('MyCtrl', function($scope, $http) {
  
                  $scope.ProjectCategoryList_FlatStyle = [{
                      "ID": "Root_1",
                      "Name": "Root_1",                   
                      "ParentID": "",
                      "Sequent": 1
                  },
                  {
                      "ID": "Root_2",
                      "Name": "Root_2",                   
                      "ParentID": "",
                      "Sequent": 2
                  },              
                  {
                      "ID": "Root_1_Sub_1_Child_1",
                      "Name": "Root_1_Sub_1_Child_1",                 
                      "ParentID": "Root_1_Sub_1",
                      "Sequent": 1
                  },
                  {
                      "ID": "Root_1_Sub_1_Child_2",
                      "Name": "Root_1_Sub_1_Child_2",                 
                      "ParentID": "Root_1_Sub_1",
                      "Sequent": 2
                  },
                  {
                      "ID": "Root_1_Sub_1",
                      "Name": "Root_1_Sub_1",                 
                      "ParentID": "Root_1",
                      "Sequent": 1
                  }];
  
  
                  $scope.ProjectCategoryList_TreeStyle = [];
                  $scope.ParentArray = [];
                  $scope.ConvertFlatToTree = function(Value){ 
                      angular.forEach(Value, function(item){                      
  
                              // Create row.                                                  
                              var  _Object = new Object();
                              _Object.ID = item.ID;
                              _Object.Name = item.Name;                           
                              _Object.ParentID = item.ParentID;
                              _Object.Sequent = item.Sequent;
                              _Object.Sub = [];
  
                              // Checking if it is root element.
                              if(item.ParentID){
                                  // It is for child node.
                                  // Get Parent Element.
                                  var ParentElement = $scope.ParentArray.filter(function (x) { return x.ID === item.ParentID; });
                                  ParentElement[0].Sub.push(_Object);
                                  $scope.ParentArray.push(_Object);                               
                              }else{
                                  // It is for parent node.
                                  // Get child elements.
                                  var ChildElementArray = $scope.ProjectCategoryList_FlatStyle.filter(function (x) { return x.ParentID === item.ID; });
                                  if(ChildElementArray.length != 0){                                  
                                      $scope.ParentArray.push(_Object);
                                      $scope.ProjectCategoryList_TreeStyle.push(_Object); 
                                      $scope.ConvertFlatToTree(ChildElementArray);
                                  }
                              }
                     })
                     console.log("ProjectCategoryList_TreeStyle = ", JSON.stringify($scope.ProjectCategoryList_TreeStyle));
                  }
                  $scope.ConvertFlatToTree($scope.ProjectCategoryList_FlatStyle);
              });
      &lt;/script&gt;   
  &lt;/head&gt;
  &lt;body ng-app="myApp" ng-controller="MyCtrl"&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Below is my final result.</p>
  
  <pre><code>[{
      "ID": "Root_1",
      "Name": "Root_1",
      "ParentID": "",
      "Sequent": 1,
      "Sub": [{
          "ID": "Root_1_Sub_1",
          "Name": "Root_1_Sub_1",
          "ParentID": "Root_1",
          "Sequent": 1,
          "Sub": [{
              "ID": "Root_1_Sub_1_Child_1",
              "Name": "Root_1_Sub_1_Child_1",
              "ParentID": "Root_1_Sub_1",
              "Sequent": 1,
              "Sub": []
          },
          {
              "ID": "Root_1_Sub_1_Child_2",
              "Name": "Root_1_Sub_1_Child_2",
              "ParentID": "Root_1_Sub_1",
              "Sequent": 2,
              "Sub": []
          }]
      },
      {
          "ID": "Root_1_Sub_1",
          "Name": "Root_1_Sub_1",
          "ParentID": "Root_1",
          "Sequent": 1,
          "Sub": []
      }]
  }]
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/sesOfcCqsE2Mt4UPvwIC?p=preview" rel="nofollow">Plunker</a></p>