How to iterate an array of objects and print key in AngularJS

Question

Following is the array of objects I am trying to iterate in ng-repeat and print keys, but unable to do so.

$scope.directivesInfo = [
    {"ngRepeat": {"enter": true, "leave": true, "move": true, "add": false, "remove": false}},
    {"ngView": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}},
    {"ngInclude": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}},
    {"ngSwitch": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}},
    {"ngIf": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}},
    {"ngClass": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}},
    {"ngShow/ngHide": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}},
    {"form/ngModel": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}},
    {"ngMessages": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}},
    {"ngMessage": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}},
];

Following is in my View -

<tr ng-repeat="(key, value) in directivesInfo">

But key is only printing 0,1,2,3 and so on but I want to print -

ngRepeat, ngView, ... likewise.

FYI - I am able to get the desired result from below mentioned array, but I am interested to achieve the same result from above array declaration.

Working -

$scope.directivesInfo = [
    {"name":"ngRepeat", "enter": true, "leave": true, "move": true, "add": false, "remove": false},
    {"name":"ngView", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngInclude", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngSwitch", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngIf", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngClass", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"ngShow/ngHide", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"form/ngModel", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"ngMessages", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"ngMessage", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
];

End Output -

EDIT -

Plnkr - http://plnkr.co/edit/vJ7pQmAYoIPpnVTi1vNi?p=preview

try my answer. maybe, it will help you

Sherali Turdiyev
– Sherali Turdiyev

2015-09-15 09:26:43 +00:00
Commented Sep 15, 2015 at 9:26 — Sherali Turdiyev
– Sherali Turdiyev, Commented Sep 15, 2015 at 9:26

Sherali Turdiyev · Accepted Answer · 2015-09-15 10:16:23Z

3

Other way is that you just make new object from array through loop:

Demo

....
$scope.directivesInfoObject = {};

for (var i = 0; i < $scope.directivesInfo.length; i++) {
    var key = Object.keys($scope.directivesInfo[i])[0];
    $scope.directivesInfoObject[key] = $scope.directivesInfo[i][key];
}

EDITED: then you can use:

    <tr ng-repeat="(key,value) in directivesInfoObject">
      <td> {{key}} </td>
      <td ng-repeat="(innerKey,innerValue) in value">
        <input type=checkbox ng-model="directivesInfoObject[key][innerKey]">
      </td>
    </tr>

edited Sep 15, 2015 at 10:16

answered Sep 15, 2015 at 9:22

Sherali Turdiyev

1,75316 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sherali Turdiyev Over a year ago

Maybe, Or, just declare your array as an object

Sherali Turdiyev Over a year ago

Then, it would be dynamic way.

Shekhar Khairnar Over a year ago

@Sherali Turdiyv in your approach if I unselect the any check box the particular value is not updating for the underlying item of array.

Sherali Turdiyev Over a year ago

@ShekharKhairnar. thanks for attention. you can see : plnkr.co/edit/6lGVyOuK8D5VCUxAjaDe?p=preview. i have edited

Md Hasan Ibrahim · Accepted Answer · 2017-09-21 06:00:05Z

3

Have a look at this

<div ng-repeat="item in directivesInfo">
    <div ng-repeat="(key,value) in item">{{key}}<div>
</div>

Hope it will help :)

Edit: I've forked from your plnkr and modified it. You can do it like the following way http://plnkr.co/edit/txNJ81Z5hJDrDX8Zhhp2?p=preview

edited Sep 21, 2017 at 6:00

answered Sep 15, 2015 at 8:48

Md Hasan Ibrahim

1,90819 silver badges28 bronze badges

3 Comments

Nesh Over a year ago

I checked this solution but It will be helpful If its div, but check I am using iteration in tr so its making <tr ng-repeat= ... and then again <tr ng-repeat= ...

Md Hasan Ibrahim Over a year ago

The was not the thing I suppose to fix. I just tried to fix the problem with the keys. And you didn't mention that thing either.

Md Hasan Ibrahim Over a year ago

See the plnkr now. It works perfectly as you desired to.

Imab Asghar · Accepted Answer · 2015-09-15 09:10:20Z

1

This should do it.

  <tr ng-repeat="item in directiveinfo"> 
      <td> {{item.name}} </td>
      <td ng-repeat="(key,value) in item"> 
        <input type=checkbox ng-model="value"> 
      </td>
    </tr>

Here is a working plunkr of it.

answered Sep 15, 2015 at 9:10

Imab Asghar

3161 silver badge7 bronze badges

1 Comment

Nesh Over a year ago

Your Plnk is wrong I already told that its working, but I am expecting from my above mentioned array type -plnkr.co/edit/vJ7pQmAYoIPpnVTi1vNi?p=preview

Shekhar Khairnar · Accepted Answer · 2015-09-15 10:24:40Z

This will be one of the simple and straight approach :

 <table>
  <tr ng-repeat="item in directivesInfo track by $index"> 
    <td>{{item.name}} </td>
    <td ng-repeat="(key,value) in item" ng-if="$index != 0"> 
      <input type="checkbox" ng-model="item[key]">
    </td>
  </tr>
</table>

Full Example :--

angular.module('app', []).controller('MyController', ['$scope',
  function($scope) {

    $scope.directivesInfo = [
    {"name":"ngRepeat", "enter": true, "leave": true, "move": true, "add": false, "remove": false},
    {"name":"ngView", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngInclude", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngSwitch", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngIf", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
    {"name":"ngClass", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"ngShow/ngHide", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"form/ngModel", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"ngMessages", "enter": false, "leave": false, "move": false, "add": true, "remove": true},
    {"name":"ngMessage", "enter": true, "leave": true, "move": false, "add": false, "remove": false},
];

}]);

<html ng-app="app">

<head>
  <script data-require="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyController">
  <table border="1">
    <thead>
      <tr>
        <th>Directive Name</th>
        <th>Enter</th>
        <th>Leave</th>
        <th>Move</th>
        <th>Add</th>
        <th>Remove</th>
      </tr>
    </thead>
    <tr ng-repeat="item in directivesInfo track by $index">
      <td>{{item.name}}</td>
      <td ng-repeat="(key,value) in item" ng-if="$index != 0">
        <input type="checkbox" ng-model="item[key]">
      </td>
    </tr>
  </table>
  <br/>
  <hr/>{{directivesInfo}}
</body>
</html>

Collectives™ on Stack Overflow

How to iterate an array of objects and print key in AngularJS

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related