Printing keys of objects in an array in AngularJS through iteration

Question

Printing keys of objects in an array in AngularJS through iteration

Here is an array of objects that I am attempting to iterate in ng-repeat and print keys, but I am facing some challenges.

$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}},
];

In my View, I have the following code -

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

However, key is only printing 0,1,2,3 and so on, but I want it to print the corresponding names like ngRepeat, ngView, and so forth.

Please note that I was able to achieve the desired result from a different array structure as shown below. But I am keen on achieving the same result from the above array declaration.

Successfully implemented with the following -

$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},
];

Final Output -

EDIT -

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

https://i.sstatic.net/CgzMv.png

javascript arrays angularjs

Answer 1

Answer №1

One alternative method is to create a new object from an array using a loop:

Check out the demo here

....
$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: you can then implement the following code snippet:

    <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>

Answer 2

One alternative method is to create a new object from an array using a loop:

Check out the demo here

....
$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: you can then implement the following code snippet:

    <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>

Answer 3

Answer №2

Take a look at this

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

Hopefully, this will be useful :)

Update: I've made some changes to your plnkr. You can see the modifications here here

Answer 4

Take a look at this

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

Hopefully, this will be useful :)

Update: I've made some changes to your plnkr. You can see the modifications here here

Answer 5

Answer №3

Here is the solution you've been looking for:

  <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>

For a live demonstration, check out this sample link.

Answer 6

Here is the solution you've been looking for:

  <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>

For a live demonstration, check out this sample link.

Answer 7

Answer №4

Here is a straightforward and simple 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>

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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5848b8290898497cb8f96a5d4cbd1cbd4">[email protected]</a>" 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>

Answer 8

Here is a straightforward and simple 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>

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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5848b8290898497cb8f96a5d4cbd1cbd4">[email protected]</a>" 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>

Printing keys of objects in an array in AngularJS through iteration

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

Organize my JavaScript code by implementing a function

The screen view count remains consistently at zero when using both Google analytics and Single Page Application analytics

Essential Guide to Binding Events with JQuery

What is the best way to validate if fields are blank before sending a message using the button?

Generate a series of buttons with generic identifiers that can be easily targeted using getElementById. The IDs will be dynamically assigned

What is the method for displaying a canvas scene within a designated div element?

Exploring a JavaScript function that triggers another function to create a new object - Utilizing Sinon and Mocha for testing purposes

Develop a radio button filter utilizing the "Date of Creation" attribute, implemented with either jquery or JavaScript

tips for achieving $translate.instant interpolation instead of concatenation

Raycasting intersection with a line on BufferGeometry in Three.js

What could be causing the issue with the initialization of useState not working as expected?

Looking for tips on resolving issues with the bootstrap navigation bar?

Exploring the capabilities of React testing-library for interacting with the DOM within a React application

React JS Button remains unaltered despite API call influence

Could someone explain the purpose of the code nums[i] = nums[i-1] + nums[i] in Python?

Hide a div when multiple classes are filtered using jQuery

Tips for eliminating null elements from an array with the help of jquery

Is it possible to define a constant enum within a TypeScript class?

My React setup is causing some problems that I need to address