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

Question

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:

If family.child has one child then the name is directly assign as a string
If family.child has more than one child then the name is assign as a array of string with the property family.child.name
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...

Shashank · Accepted Answer · 2016-02-16 07:42:23Z

Please refer the fiddle here. You need some changes in the model and loop with the new modified model - newFamily instead of family.

HTML:

<div ng-app="app" ng-controller="test">
    <ul>
        <li ng-repeat="member in newFamily">
            {{ member.name }}
            <div class="liststyling" ng-if="member.child.length > 0">
                <ul>
                    <li ng-repeat="chdMember in member.child track by $index">
                        {{ chdMember.name }}
                    </li>
                </ul>
            </div>
        </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",
           "child": "Ranjan"
       },
       {
           "name": "Mahesh",
           "child": "Babu"
       },
       {
           "name": "Joseph"
       }
    ];
    $scope.newFamily = [];
    angular.forEach($scope.family, function (v, k) {
        var existingChildArray = v.child;
        var newChildArray = [];
        if (!angular.isArray(v.child) && v.child) {
            newChildArray.push({ 'name': v.child });
        }
        var addChild = newChildArray.length > 0 ? newChildArray : existingChildArray;
        $scope.newFamily.push({ 'name': v.name, 'child': addChild });
    });
});

praveen · Accepted Answer · 2016-02-16 07:42:44Z

Try this for your actual output.

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

$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:"Babu"}]
   },
   {
       "name": "Joseph",
       "child": []
   }
];

jagmohan · Accepted Answer · 2016-02-16 07:51:19Z

1

You can add the following method to your controller

$scope.isArray = function(obj) {
  return angular.isArray(obj);
}

and update the markup as

<li ng-repeat="member in family">
    {{ member.name }}
    <div class="liststyling">
    <ul ng-if="isArray(member.child)">
      <li ng-repeat="chdMember in member.child">
          {{ chdMember.name }}
      </li>
    </ul>
    <ul ng-if="member.child && !isArray(member.child)">
      <li>
        {{ member.child }}
      </li>
    </ul>
    </div>
</li>

This should do, I think.

answered Feb 16, 2016 at 7:51

jagmohan

2,0622 gold badges26 silver badges41 bronze badges

Comments

Viplock · Accepted Answer · 2016-02-16 09:21:24Z

Even though @MarcNuri provided a good answer. But if you are not changing the data pattern you can use this also.

HTML

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

JS

app.controller('test', function ($scope) {
$scope.isArray = angular.isArray;
$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"
   }
];
  });

just notice $scope.isArray = angular.isArray; in js.Find plank HERE

Marc Nuri · Accepted Answer · 2016-02-16 07:26:56Z

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"
       }
    ];
}

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest