How to change the key name for each element in array using ng-repeat

Question

I have an array of object, which I am showing in table through ng-repeat.

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

I am using ng-repeat in <th></th> and <td></td> too. But my columnHeaders name and row property(columnRows) names are different. I want to change my property name to same as column header name while using ng-repeat on <td></td> tag. I am thought of using alias 'as' but not sure how to use it for each element. Can anyone help me?

I don't understand what you want to achieve. Please elaborate. — JB Nizet
– JB Nizet, Commented Nov 22, 2017 at 18:06
while using ng-repeat for columnRows array I want to change the value of each element same to columnHeaders array. Example:- name ->Name, bankName ->Bank Name and so on. — shreya gupta
– shreya gupta, Commented Nov 22, 2017 at 18:11
The template is used to display what the objects contain. Its role is not to modify what the objects contain. The JavaScript code should do that. But I have a hard time understanding why it's desirable to change perfectly valid keys of your ojects, easy to use and respecting naming conventions, into hard to use keys (containing spaces), not respecting naming conventions. — JB Nizet
– JB Nizet, Commented Nov 22, 2017 at 18:13
If you use object keys for string output you are doing it wrong. Keys are internal and if they happen to also be the strings that you want that's a lucky coincidence, If you want to display certain strings for certain keys that's an additional mechanism. What do you do when you change a string (e.g. internationalization), change the code, change all keys??? Don't use keys for string output. Keys are part of the code or the meta data, to show pretty names to users add a translation layer that uses a database of strings, which you can edit independent of the code or the application data.. — Mörre
– Mörre, Commented Nov 22, 2017 at 18:21

Vasim Hayat · Accepted Answer · 2017-11-22 20:19:38Z

Instead of using two columnRows and header rows(array of string) , make a single array of keyHash(column data key and header string )

check running fiddle for this

and code be like :-

   <!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 columnRows">{{col.displayStr}}</th>  
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data track by $index">
          <td ng-repeat="col in columnRows">{{row[col.key]}}</td> 
        </tr>
    </tbody>
</table>

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


$scope.columnRows = [
 {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>

Collectives™ on Stack Overflow

How to change the key name for each element in array using ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related