Changing the key name for each element in an array using ng-repeat: a guide

Question

Changing the key name for each element in an array using ng-repeat: a guide

In my current project, I have an array of objects that I am displaying in a table using the ng-repeat directive.

<table>
    <thead>
        <tr>
            <th ng-repeat="col in columnHeaders">{{col}}</th> //['Name', 'Bank Name','Code', 'Type','Status'];
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data track by $index">
          <td ng-repeat="col in columnRows">{{row[col]}}</td> //['name', 'bankName','code', 'type','isActive'];
        </tr>
    </tbody>
</table>

Although I am using ng-repeat on both the <th></th> and <td></td> elements, I encountered an issue where the names of my columnHeaders and row properties (columnRows) are different. I wanted to align the property name with the column header name while using ng-repeat on the <td></td> tag. I considered using an alias with 'as' but was unsure how to implement it for each element. Can anyone provide guidance or assistance?

javascript angularjs

Answer 1

Answer №1

Optimize your code by using a single array of keyHash instead of two columnRows and header rows (array of string).

View the updated fiddle here

The revised code should look like this:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<table>
    <thead>
        <tr>
            <th ng-repeat="col in keyHash">{{col.displayStr}}</th>  
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data track by $index">
          <td ng-repeat="col in keyHash">{{row[col.key]}}</td> 
        </tr>
    </tbody>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {


$scope.keyHash = [
 {key:'name',displayStr:'Name'},
  {key:'bankName',displayStr:'Bank Name'},
   {key:'code',displayStr:'Code'},
    {key:'type',displayStr:'Type'},
     {key:'isActive',displayStr:'Status'}
]

  $scope.data = [
   {
   name:'James',
   bankName:'RBL',
   code:'1234',
   type:'Saving',
   isActive:true
   },
   {
   name:'Riyan',
   bankName:'DSB',
   code:'1234',
   type:'Current',
   isActive:true
   }
  ];

});
</script>

</body>
</html>

Answer 2

Optimize your code by using a single array of keyHash instead of two columnRows and header rows (array of string).

View the updated fiddle here

The revised code should look like this:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<table>
    <thead>
        <tr>
            <th ng-repeat="col in keyHash">{{col.displayStr}}</th>  
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data track by $index">
          <td ng-repeat="col in keyHash">{{row[col.key]}}</td> 
        </tr>
    </tbody>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {


$scope.keyHash = [
 {key:'name',displayStr:'Name'},
  {key:'bankName',displayStr:'Bank Name'},
   {key:'code',displayStr:'Code'},
    {key:'type',displayStr:'Type'},
     {key:'isActive',displayStr:'Status'}
]

  $scope.data = [
   {
   name:'James',
   bankName:'RBL',
   code:'1234',
   type:'Saving',
   isActive:true
   },
   {
   name:'Riyan',
   bankName:'DSB',
   code:'1234',
   type:'Current',
   isActive:true
   }
  ];

});
</script>

</body>
</html>

Changing the key name for each element in an array using ng-repeat: a guide

Answer №1

Similar questions

Is it possible to access the DOM element within which the registerHelper is being used?

Issues with the functionality of Google Translate's JavaScript code snippet are causing

Testing a subordinate function within the main method that involves HTTP request authorization

How come I am unable to return an array from an angular factory function if arrays are considered objects?

Crack open a JSON object

Where to begin with Angular materials?

Unexpected outcomes when trying to sort and paginate React-Table

extracting the value of a chosen radio button in AngularJS using HTML

Deselect a checkbox by selecting a radio button with just Javascript code

Ensure that the central section of the slider remains illuminated

Error: Request Timed Out - The asynchronous callback function was not executed within the specified timeout set by the jasmine.DEFAULT_TIMEOUT

Issue with generating WebGL shaders

Access file using operating system's pre-installed application

Having trouble with Vuejs uploading multiple images when not using a CDN?

Controller unable to access form inside ng-repeat loop in AngularJS

Struggling to prevent keyboard-triggered date changes in the MUI DatePicker API

Managing toggles for save and edit buttons in Vue - a comprehensive guide

Getting the value of a JSON object in CodeIgniter can be easily achieved by using the appropriate

A guide to efficiently pre-rendering secure APIs on a server for Next.js

Cannot locate module: Error: Unable to find the path '../containers/Layout' in '/home/yusquen/Projectss/react-shop/src/components'