I'm trying to figure out how convert and calculate string, in this case i call an ajax "order/list" using $http.post to get a list like that, it contains 3 objects:

{
"orders":[
    {
        "id_order":"206",
        "shipping":"100.00",
        "tax":"35.00"
    },
    {
        "id_order":"205",
        "shipping":"160.00",
        "tax":"16.00"
    },
    {
        "id_order":"204",
        "shipping":"100.00",
        "tax":"16.00"
    }

]
}

Tax is a percentage, then I use ng-repeat to display list of order:

<tr ng-repeat="order in orders">
    <td>{{order.id_order}}</td>
    <td>$ {{(order.shipping * (order.tax/100) ) + order.shipping }}</td>
</tr>

You see {{(order.shipping * (order.tax/100) ) + order.shipping }} that I need to convert them as number and calculate, for example, shipping is 100.00 and tax is 16.00, excepted result would be 116.00, not 16100.00

I'm trying to figure out how convert and calculate string, in this case i call an ajax "order/list" using $http.post to get a list like that, it contains 3 objects:

{
"orders":[
    {
        "id_order":"206",
        "shipping":"100.00",
        "tax":"35.00"
    },
    {
        "id_order":"205",
        "shipping":"160.00",
        "tax":"16.00"
    },
    {
        "id_order":"204",
        "shipping":"100.00",
        "tax":"16.00"
    }

]
}

Tax is a percentage, then I use ng-repeat to display list of order:

<tr ng-repeat="order in orders">
    <td>{{order.id_order}}</td>
    <td>$ {{(order.shipping * (order.tax/100) ) + order.shipping }}</td>
</tr>

You see {{(order.shipping * (order.tax/100) ) + order.shipping }} that I need to convert them as number and calculate, for example, shipping is 100.00 and tax is 16.00, excepted result would be 116.00, not 16100.00

• javascript
• angularjs

• 1 your properties are strings, not numbers, so you can't do math using them – Claies Commented Oct 26, 2015 at 22:06
• Claies's ment is correct. AngularJS is very sensitive to this and will not perform calculations if the properties contain string instead of numbers. It would be helpful to know where you are getting this data from because it's better to get the JSON correctly from the source rather than converting the data in Javascript. For example, if it's PHP you can force the json_encode to use the correct data types. – Ricardo Velhote Commented Oct 26, 2015 at 22:16
• @Claies You didn't read at all like I asked "how to convert ... as number from string" – Ivan Commented Oct 26, 2015 at 22:24

6 Answers 6

Try to have a look here https://jsfiddle/z5gnhzt2/

 $scope.calculate = function(shipping, tax){
        return parseFloat(shipping) * parseFloat(tax)/100 + parseFloat(shipping);
    };

 <td>$ {{calculate(order.shipping, order.tax)}}</td>

Use a middle function, like in this little example :

$scope.test = [
  { a : '23', b : '45' },
  { a : '3', b : '4' }    
]

$scope.doCalc = function(a,b) {
  return parseInt(a)*parseInt(b);
} 

markup :

<table> 
  <thead>
    <tr><th>calc</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="c in test">
      <td>
        {{ doCalc(c.a, c.b) }}
      </td>
    </tr>
  </tbody>
</table>

http://plnkr.co/edit/kIXOQ7B3OMrdypqaTz39?p=preview

If you realy want to do the calculation in the view you could use the "number filter"

{{ (order.shipping | number) * (order.tax | number)/100 }} 

demo: http://jsfiddle/jkrielaars/kde0mxpe/4/

However, I would advise to do these calculations in your controller and keep the view clean of this logic.

angular.forEach($scope.orders, function(order) {
        order.shippingIncTax = parseInt(order.shipping)*(parseInt(order.tax)/100);
    });

The math could be simplified to:

{{order.shipping * (1 + order.tax / 100) | currency}}

And that avoids the problem of the addition of strings.

Here is the fiddle

As a side note, I would personally advise to work on the REST Api so as to get numbers instead of strings. We see too much patches or reformat on the client-side, when it can be corrected at the source.

There may be a more idiomatic AngularJS answer. In the meantime, have a look at parseFloat, because your JSON object is returning strings (they are double-quoted) instead of numeric values:

var shipping = "100.00";
var tax = "16.00";

(parseFloat(shipping) * (parseFloat(tax)/100) ) + parseFloat(shipping);
// 116

Or in Angular:

<tr ng-repeat="order in orders">
    <td>{{order.id_order}}</td>
    <td>$ {{(parseFloat(order.shipping) * (parseFloat(order.tax)/100) ) + parseFloat(order.shipping) }}</td>
</tr>

If you are in a position to control the API from which you retrieve the JSON data, you may want to consider outputting numeric values (don't quote them).

Also note that parseFloat() will strip trailing decimal zeros (which are only used to represent scientific precision):

> tax = "16.00";
'16.00'
> parseFloat(tax);
16
> tax = "16.0001";
'16.0001'
> parseFloat(tax);
16.0001

How did you get the value of 16100.00 if you havn´t allready converted them to numbers?

(order.shipping * (order.tax/100)) + order.shipping

If converting to numbers is the problem, you can try to read this post.