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

Question

I have the 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 a table with the 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 the following table:

-----------------------------------------
| name    | jan   | feb   | type        |
-----------------------------------------
| Visits  | 25000 | 31050 | number      |
-----------------------------------------
| CPC     | 52    | 39    | currency    |
-----------------------------------------
| Weather | 26    | 28    | temperature |
-----------------------------------------

And what I'm trying to do is to manilupate the way the data is represented based on the "type" provided by the JSON file so that it results in the following:

-------------------------------------------
| name    | jan    | feb    | type        |
-------------------------------------------
| Visits  | 25,000 | 31,050 | number      |
-------------------------------------------
| CPC     | $52.00 | $39.00 | currency    |
-------------------------------------------
| Weather | 26˚C   | 28˚C   | temperature |
-------------------------------------------

Also, I would like to hide the last column, so that the final result would be the following:

-----------------------------
| name    | jan    | feb    |
-----------------------------
| Visits  | 25,000 | 31,050 |
-----------------------------
| CPC     | $52.00 | $39.00 |
-----------------------------
| Weather | 26˚C   | 28˚C   |
-----------------------------

I'm generating the JSON file (as opposed to reading from a third party), which means I can change its outcome if needed.

Answer 1

I think there is no inbuilt filter for temperature, But you can use number, currency filters in angularjs.

only thing you have to do is implement a custom angular filter for temperature, something like,

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

then format the object array, i did it inside the controller you can choose a another way to do it something like use the filter in html. (don't forget to inject the $filter service in to controller.)

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

this will format and reassign the values to the object properties.

finally you need to hide the last column so you 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 only if iteration is not the last one

here is a DEMO

OR you may want to get the data using ajax. so you can do it like this,

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

  });

call a function formatData to format the ajax data, and assign the formatted data to $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 is a DEMO

UPDATE

with dynamic arrays with more object properties,

create a array and define the non formattable properties,

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

check the property is formattable if so format it. and if you interested to remove type property you can do it in here as well and remove the ng-if thing in html and that will be 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 the type property from the object
  delete value['type'];
});

here is the DEMO