1

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

Ivan
  • 1,221
  • 2
  • 21
  • 43
  • 1
    your properties are strings, not numbers, so you can't do math using them – Claies Oct 26 '15 at 22:06
  • Claies's comment 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 Oct 26 '15 at 22:16
  • @Claies You didn't read at all like I asked "how to convert ... as number from string" – Ivan Oct 26 '15 at 22:24

6 Answers6

2

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

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

 <td>$ {{calculate(order.shipping, order.tax)}}</td>
Fedor Skrynnikov
  • 5,521
  • 4
  • 28
  • 32
  • This is definetly good answer, calculate function would be flexible solution that can place anywhere, Thanks! – Ivan Oct 26 '15 at 22:34
2

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.net/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);
    });
JasperZelf
  • 2,731
  • 1
  • 22
  • 34
2

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

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
2

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.

Michel
  • 26,600
  • 6
  • 64
  • 69
1

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
msanford
  • 11,803
  • 11
  • 66
  • 93
  • But how do you get 2 variables as shipping and tax from JSON data as 3 objects and render literally {{orders.calculatedTax}} This is angular.js, not as Javascript solution – Ivan Oct 26 '15 at 22:09
  • @Ivan As I showed in my first example, you wrap `parseFloat()` around your JSON values... I updated my answer. Your statement that this is AngularJS but not JavaScript is somewhat puzzling, though. – msanford Oct 26 '15 at 22:14
  • Your updated answer returned as "null" AngularJS doesn't work JS expression inside of {{ }} – Ivan Oct 26 '15 at 22:17
1

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.

Community
  • 1
  • 1
Jonathan
  • 48
  • 7