javascript - How to filter objects in AngularJS by specifying a filter type for each object? -

i have following data:

{     "records": [         {             "name": "visits",             "jan": "25000",             "feb": "31050",             "type" : "number"         },         {             "name": "cpc",             "jan": "52",             "feb": "39",             "type" : "currency"         },         {             "name": "weather",             "jan": "26",             "feb": "28",             "type" : "temperature"         }     ] } 

and i'm displaying in table following template:

<table ng-app="myapp" ng-controller="kpiscontroller">     <thead>         <tr>             <th ng-repeat="(key, val) in objects[0]">{{key}}</th>         </tr>     </thead>     <tbody>         <tr ng-repeat="object in objects">             <td ng-repeat="(key, val) in object">{{val}}</td>         </tr>     </tbody> </table> 

which results in following table:

----------------------------------------- | name    | jan   | feb   | type        | ----------------------------------------- | visits  | 25000 | 31050 | number      | ----------------------------------------- | cpc     | 52    | 39    | currency    | ----------------------------------------- | weather | 26    | 28    | temperature | ----------------------------------------- 

and i'm trying manilupate way data represented based on "type" provided json file results in following:

------------------------------------------- | name    | jan    | feb    | type        | ------------------------------------------- | visits  | 25,000 | 31,050 | number      | ------------------------------------------- | cpc     | $52.00 | $39.00 | currency    | ------------------------------------------- | weather | 26˚c   | 28˚c   | temperature | ------------------------------------------- 

also, hide last column, final result following:

----------------------------- | name    | jan    | feb    | ----------------------------- | visits  | 25,000 | 31,050 | ----------------------------- | cpc     | $52.00 | $39.00 | ----------------------------- | weather | 26˚c   | 28˚c   | ----------------------------- 

i'm generating json file (as opposed reading third party), means can change outcome if needed.

i think there no inbuilt filter temperature, can use number, currency filters in angularjs.

only thing have implement custom angular filter temperature, like,

app.filter('temperature', function() {     return function(input) {         return input+'℃';     }; }); 

then format object array, did inside controller can choose way use filter in html. (don't forget inject $filter service in controller.)

angular.foreach($scope.objects, function(value, index) {     value.jan = $filter(value.type)(value.jan);     value.feb = $filter(value.type)(value.feb); }); 

this format , reassign values object properties.

finally need hide last column can use ng-if, ng-hide or ng-show based on last iteration or not,

<td ng-repeat="(key, val) in object" ng-if="!$last">{{ val}}</td> 

show if iteration not last one

here demo

or may want data using ajax. can this,

$http.get('data.json').success(function(data, status, headers, config) {     $scope.objects = formatdata(data);   }).   error(function(data, status, headers, config) {    }); 

call function formatdata format ajax data, , assign formatted data $scope.objects.

function formatdata(data) {      angular.foreach(data, function(value, index) {       value.jan = $filter(value.type)(value.jan);       value.feb = $filter(value.type)(value.feb);     });      return data;      } 

here demo

update

with dynamic arrays more object properties,

create array , define non formattable properties,

var escapeindexes= ['name', 'type']; 

check property formattable if format it. , if interested remove type property can in here , remove ng-if thing in html , more cleaner. :)

angular.foreach(data, function(value, index) {   angular.foreach(value, function(val, key) {     if(escapeindexes.indexof(key) === -1) {       value[key] = $filter(value.type)(val);     }   });    // delete type property object   delete value['type']; }); 

here demo