Angular, math function in interpolation / binding

Question

I am working with Angular and I am trying to do this

<td>{{(obj.revenue.total / obj.clicks.total).toFixed(2)}}</td>

and in the table the result is something like this

**EPC** 0.60 NaN // returns this, why ?

I prepared a JSFiddle where you will see this

<table>
  <tr>
    <th ng-repeat='header in headers'>{{header}}</th>
  </tr>
  <tr ng-repeat='obj in data'>
    <td></td>
    <td>{{obj.clicks.total.toFixed(2)}}</td>
    <td>{{obj.landing_pages.total_clicks.toFixed(2)}}</td>
    <td>{{obj.landing_pages.click_through_rate.toFixed(2)}}</td>
    <td>{{obj.conversions.total.toFixed(2)}}</td>
    <td>{{(obj.conversions.total / obj.landing_pages.total_clicks)}}</td>
    <td>{{obj.conversions.amount.toFixed(2)}}</td>
    <td>{{obj.cost.total.toFixed(2)}}</td>
    <td>{{(ob.conversions.amount - obj.cost.total).toFixed(2)}}</td>
    <td>{{obj.net.roi.toFixed(2)}}</td>
    <td>{{obj.cost.cpc}}</td>
    <td>{{(obj.revenue.total / obj.clicks.total).toFixed(2)}}</td>
    <td>{{obj.cost.ecpc.toFixed(2)}}</td>
  </tr>
</table>

and the controller

.controller('PeopleCtrl', function($scope) {
  $scope.headers = [
    'Traffic Source',
    'Clicks',
    'LP Clicks',
    'LP CTR',
    'Conv',
    'CVR',
    'Rev',
    'Spend',
    'Profit',
    'ROI',
    'CPC',
    'EPC',
    'EPA'
  ];

  $scope.data = [];

  $scope.LoadMyJson = function() {
    angular.forEach(myJson, function(items) {
      $scope.data.push(items)
    })        
  };
  $scope.LoadMyJson();

})

http://jsfiddle.net/x5hfwdfs/

see the tds CVR, Profit and EPC, are the ones where I need to calculate.

Do you guys have an idea of the issue ?

You should probably validate that the properties exist and have the types of values you expect before they go into the view. — elclanrs
– elclanrs, Commented Jan 25, 2016 at 20:07
@elclanrs can you give me a piece of code? all of them expect to be numbers, except the header Traffic Source, that is a name. — Reacting
– Reacting, Commented Jan 25, 2016 at 20:09
Well, what I mean is that an expression like (obj.revenue.total / obj.clicks.total).toFixed(2) can fail in various ways. In the controller I'd check if these properties exist first like if (obj.revenue && obj.revenue.total && typeof obj.revenue.total === 'number') $scope.revenueTotal = obj.revenue.total and use that in the view so you know if it displays something is always what you expect, otherwise fail with an error, or gracefully, like display a zero if it is supposed to be a number. — elclanrs
– elclanrs, Commented Jan 25, 2016 at 20:12

Mathew Berg · Accepted Answer · 2016-01-25 20:12:07Z

1

You can use the fractionSize filter:

<td>{{obj.clicks.total | fractionSize: 2}}</td>

You can see the example here:

https://docs.angularjs.org/api/ng/filter/number

answered Jan 25, 2016 at 20:12

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reacting Over a year ago

Ok, it fix it but I am having something wrong, jsfiddle.net/kvat53Lv , look at Profit, there is a 0.00 below the 1st row, why ?

tanenbring Over a year ago

You have an extra string in your data. It's producing 3 rows, not two as expected.

tanenbring Over a year ago

"name": "Traffic Source #345"

Collectives™ on Stack Overflow

Angular, math function in interpolation / binding

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related