Search code examples
arraysangularjsjsonangularjs-ng-repeatangular-ng-if

AngularJS ng-repeat for a JSON contains String or an array of a same property

I'm having a JSON data namely $scope.family, it contains the family.name and optionally family.child

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",
           "child": "Ranjan"
       },
       {
           "name": "Mahesh",
           "child": "Babu"
       },
       {
           "name": "Joseph"
       }
    ];
});

Cases:

  1. If family.child has one child then the name is directly assign as a string
  2. If family.child has more than one child then the name is assign as a array of string with the property family.child.name
  3. If family.child doesn't in the collection just show the family.name

My Expected Output UI is

  • Siva
    • Suriya
    • Karthick
  • Kumar
    • Rajini
    • Kamal
    • Ajith
  • Samer
    • Ranjan
  • Mahesh
    • Babu
  • Joseph

My HTML Source Code (I Can't able to get the expected output from this code)

<ul>
    <li ng-repeat="member in family">
        {{ member.name }}
        <div class="liststyling" ng-if="member.child.length > 0">
            <ul>
                <li ng-repeat="chdMember in member.child>
                    {{ chdMember.name }}
                </li>
            </ul>
        </div>
    </li>
</ul>

Kindly assist me...

Solution

  • Here is a simple running version of your code JSFiddle (not the best coding practices)

    Keep in mind that you should use at least AngularJS 1.1.15 version at least to use ng-if.

    You should simply tidy up your script a little and it'll work:

    HTML:

    <body  ng-app="myApp">

<div ng-controller="ctrl">
<ul>
    <li ng-repeat="member in family">
        <h2>
        {{ member.name }}
        </h2>
        <div class="liststyling" ng-if="member.child.length > 0">
            <ul>
                <li ng-repeat="chdMember in member.child">
                    {{ chdMember.name }}
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>

</body>

    Javascript:

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

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