relational database data using ngrepeat

Question

I want to show data in a parent-child(bu_name) format using angularJs, I used ng-repeat but it's not working in a paren-child manner, Please give hint or explanation how to solve this problem?

     var businessData = [{
        "bu_id": 2,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "qhhjqqw",
        "created_date": "2016-05-31 10:58:06",
        "updated_date": "2016-05-31 10:58:06",
        "parent_id": null
    }, {
        "bu_id": 3,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "kqjjk",
        "created_date": "2016-05-31 10:58:12",
        "updated_date": "2016-05-31 10:58:12",
        "parent_id": 2
    }, {
        "bu_id": 5,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "parent",
        "created_date": "2016-06-28 08:32:34",
        "updated_date": "2016-06-28 08:32:34",
        "parent_id": null
    }, {
        "bu_id": 6,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "child",
        "created_date": "2016-06-28 08:32:48",
        "updated_date": "2016-06-28 08:32:48",
        "parent_id": 5
    }, {
        "bu_id": 7,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "child_s child",
        "created_date": "2016-06-28 08:33:16",
        "updated_date": "2016-06-28 08:33:16",
        "parent_id": 6
    }];

Was my answer helpful or do you need more help? – Prince John Jun 29 '16 at 05:13 — Prince John, Jun 29 '16 at 05:13

score 0 · Answer 1 · answered Jun 28 '16 at 11:24

i have a working example

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Angular Application</title>
    <script src="lib/Angular/angular.min.js" type="text/javascript" ></script>
</head>
<body>

<div  ng-controller="mycontroller">
<div class="container">
<br/>
<div class="row well">
    <div class="col-md-3">
        <h3>Search</h3>
    </div>
    <div class="col-md-6">
            <input type="text" class="form-control" ng-model="search" placeholder="Enter Search word"/>
    </div>

</div>
<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>bu_id</th>
                <th>tenant_id</th>
                <th>company_id</th>
                <th>bu_name</th>
                <th>Date</th>

            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="item in jsondata | filter:search">
                <td>#{{item.bu_id}}</td>
                <td>{{item.tenant_id}}</td>
                <td>{{item.company_id}}</td>
                <td>{{item.bu_name}}</td>
                <td>{{item.created_date}}</td>
            </tr>       
         </tbody>
          </table>

</div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("mycontroller", ['$scope','$http', function($scope, $http)
        {    

                $scope.jsondata =[{
        "bu_id": 2,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "qhhjqqw",
        "created_date": "2016-05-31 10:58:06",
        "updated_date": "2016-05-31 10:58:06",
        "parent_id": null
    }, {
        "bu_id": 3,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "kqjjk",
        "created_date": "2016-05-31 10:58:12",
        "updated_date": "2016-05-31 10:58:12",
        "parent_id": 2
    }, {
        "bu_id": 5,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "parent",
        "created_date": "2016-06-28 08:32:34",
        "updated_date": "2016-06-28 08:32:34",
        "parent_id": null
    }, {
        "bu_id": 6,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "child",
        "created_date": "2016-06-28 08:32:48",
        "updated_date": "2016-06-28 08:32:48",
        "parent_id": 5
    }, {
        "bu_id": 7,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "child_s child",
        "created_date": "2016-06-28 08:33:16",
        "updated_date": "2016-06-28 08:33:16",
        "parent_id": 5
    }];


        }]
);
</script>
</body>
</html>

Thank you, but I think you will get what I want through the image. . .Thank you in advance. . — Uday Malangave, Jun 28 '16 at 11:55

Prince John · Answer 2 · 2016-06-29T09:46:01.833

I made a simple plunkr which parses the data into a tree structure, which is easier to handle with Angular. Then you can simply ng-repeat it.

The parsing is dynamic, the ng-repeat in this example is not, however if you need this to be dynamic as well, there's a lot of other solutions for that on SO. This, however, solves your main problem.

Controller

app.controller('MainCtrl', function($scope) {
   $scope.businessData = [{
        "bu_id": 2,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "qhhjqqw",
        "created_date": "2016-05-31 10:58:06",
        "updated_date": "2016-05-31 10:58:06",
        "parent_id": null
    }, {
        "bu_id": 3,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "kqjjk",
        "created_date": "2016-05-31 10:58:12",
        "updated_date": "2016-05-31 10:58:12",
        "parent_id": 2
    }, {
        "bu_id": 5,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "parent",
        "created_date": "2016-06-28 08:32:34",
        "updated_date": "2016-06-28 08:32:34",
        "parent_id": null
    }, {
        "bu_id": 6,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "child",
        "created_date": "2016-06-28 08:32:48",
        "updated_date": "2016-06-28 08:32:48",
        "parent_id": 5
    }, {
        "bu_id": 7,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "child_s child",
        "created_date": "2016-06-28 08:33:16",
        "updated_date": "2016-06-28 08:33:16",
        "parent_id": 5
    }];

    $scope.parseData = function() {
      $scope.businessDataCopy = [];

      for( var i = 0, len = $scope.businessData.length ; i < len ; i++ ) {
        // If the data has no parent, then it is a parent
        if( !$scope.businessData[i].parent_id ) {
          $scope.businessDataCopy[ $scope.businessData[i].bu_id ] = $scope.businessData[i];
        // Otherwise it is a child, push it to the parent
        } else {
          if( !$scope.businessDataCopy[ $scope.businessData[i].parent_id ].children ) {
            $scope.businessDataCopy[ $scope.businessData[i].parent_id ].children = [];
          }
          $scope.businessDataCopy[ $scope.businessData[i].parent_id ].children.push( $scope.businessData[i] );
        }
      }
      $scope.businessDataCopy = $scope.businessDataCopy.filter(function(n){ return n !== undefined }); 
    }
    $scope.parseData();
});

Html

<body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="data in businessDataCopy track by $index">
        {{data.bu_name}}
        <ul>
          <li ng-repeat="d in data.children">
            {{d.bu_name}}
          </li>
        </ul>
      </li>
    </ul>
</body>

Edit: Updated plnkr with new data.

thank you @john but it's not providing the result as a result provided in the image. child_s data is child's child — Uday Malangave, Jun 29 '16 at 09:19
@UdayMalangave That's because in the original data you provided me with the element with bu_id 7 had parent_id 5. Please check my new solution. — Prince John, Jun 29 '16 at 09:45
Thank you and another question will you know how to create unlimited nested list? — Uday Malangave, Jun 29 '16 at 10:16
@UdayMalangave Sure, here is an example with unlimited nested lists: http://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects — Prince John, Jun 29 '16 at 10:57

relational database data using ngrepeat

2 Answers2