AngularJS ng-repeat for dynamic child json array

Question

I'm having a dynamic JSON, which contains the list of name, it also contains the children names as a subset. How can I show it in the HTML UI using angularJS ng-repeat

The Sample Dynamic JSON is

$scope.family = [
   {
      "name":"Siva",
      "child":[
         {
            "name":"Suriya"
         },
         {
            "name":"Karthick"
         }
      ]
   },
   {
      "name":"Kumar",
      "child":[
         {
            "name":"Rajini"
         },
         {
            "name":"Kamal"
         },
         {
            "name":"Ajith"
         }
      ]
   },
   {
      "name":"Samer"
   },
   {
      "name":"Mahesh"
   }
];

<div ng-repeat="members in family">
    <!-- How to Show it in the UI -->
</div>

Note: The JSON is generated based on Request. The Child array is Optional and it may contain the length 'n'

Its not a valid JSON.

Rajesh Dixit
– Rajesh Dixit

2016-02-15 09:24:06 +00:00
Commented Feb 15, 2016 at 9:24 — Rajesh Dixit
– Rajesh Dixit, Commented Feb 15, 2016 at 9:24
@Rajesh I Updated the JSON...

B.Balamanigandan
– B.Balamanigandan

2016-02-15 09:27:13 +00:00
Commented Feb 15, 2016 at 9:27 — B.Balamanigandan
– B.Balamanigandan, Commented Feb 15, 2016 at 9:27
You can try something like this: JSFiddle

Rajesh Dixit
– Rajesh Dixit

2016-02-15 09:29:48 +00:00
Commented Feb 15, 2016 at 9:29 — Rajesh Dixit
– Rajesh Dixit, Commented Feb 15, 2016 at 9:29

Shashank · Accepted Answer · 2016-02-16 05:35:06Z

You can better your answer by adding an ng-if directive, as the child is optional. Of course, it won't make any impact to you app, but it is a good way to code.

Plus, instead of adding ng-repeat on ul, it should be in li. It makes no sense in looping the ul for a single list.

Please refer the sample here.

HTML:

<div ng-app="app" ng-controller="test">
    <ul ng-repeat="member in family">
        <li>
            {{member.name}}
            <span ng-if="member.child.length > 0">
                <ul>
                    <li ng-repeat="c in member.child">{{c.name}}</li>
                </ul>
            </span>
        </li>
    </ul>
</div>

JS:

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

app.controller('test', function ($scope) {
    $scope.family = [
       {
           "name": "Siva",
           "child": [
              {
                  "name": "Suriya"
              },
              {
                  "name": "Karthick"
              }
           ]
       },
       {
           "name": "Kumar",
           "child": [
              {
                  "name": "Rajini"
              },
              {
                  "name": "Kamal"
              },
              {
                  "name": "Ajith"
              }
           ]
       },
       {
           "name": "Samer"
       },
       {
           "name": "Mahesh"
       }
    ];
});

B.Balamanigandan · Accepted Answer · 2016-02-16 05:50:44Z

0

The Corrected answer

<ul ng-repeat="member in family">
    <li>{{member.name}}
        <ul>
            <li ng-bind="c.name" ng-repeat="c in member.child"></li>
        </ul>
    </li>
</ul>

edited Feb 16, 2016 at 5:50

answered Feb 15, 2016 at 10:41

B.Balamanigandan

4,93313 gold badges79 silver badges139 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat for dynamic child json array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related