Knockout/JQuery currency format

Question

I have the below page working pretty well (I've cut out some other fields and styling to keep the sample that I post here smallish). I'd like the Premium line in the table (line 17) to format as currency (USD). What's the best way of doing this?

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div class="datagrid" > <table > <thead> <tr> <th>Location Name</th> <th>Location Total</th> </tr> </thead> <tbody data-bind="foreach: { data: Locations, as: 'location' }"> <tr> <td><span data-bind="text: location.LocationName" /> </td> <td><span data-bind="text: location.Premium" /> </td> </tr> </tbody> </table> </div> <script> $(document).ready(function () { var appViewModel // AppViewModel function AppViewModel() { this.Locations = ko.observable([]); } var appViewModel = new AppViewModel(); ko.applyBindings(appViewModel); $.getJSON("http://waltweb01:85/LTCEPLWS/LTCJSON.svc/getLTCWithIDs/4", function (data) { incomingData = data; appViewModel.Locations(data.getLTCWithIDsResult.Locations); }); }); </script> </asp:Content>

Not a duplicate. And frankly I can't see how the 13-vote answer at the linked alleged dupe applies to that page's original question. — Talon Blackthorne
– Talon Blackthorne, Commented Jan 15, 2014 at 19:14
Anyway... I've used "<span data-bind="text: formatCurrency(location.Premium)" in order to try and build a return value, but all the formatCurrency function receives is a puking mess of javascript out of it's else branch that (I think) is some function from Knockout. — Talon Blackthorne
– Talon Blackthorne, Commented Jan 15, 2014 at 19:18
function formatCurrency(value) { if (!isNaN(value) && isFinite(value)) { return "$" + value.toFixed(2); } else { return "CCB: " + value; } } — Talon Blackthorne
– Talon Blackthorne, Commented Jan 15, 2014 at 19:20
Is your Premium an ko.observable? If you then you need to write <span data-bind="text: formatCurrency(location.Premium())> note the parens () after Premium ... jsfiddle.net/kks53 — nemesv
– nemesv, Commented Jan 15, 2014 at 20:09

Rocklan · Accepted Answer · 2015-08-13 00:10:38Z

Answer is hidden in the comments so to make it easier for future readers here's an answer.

Change your HTML code to:

<td><span data-bind="text: formatCurrency(location.Premium())" /> </td>

And then add the javascript formatCurrency() function:

var formatCurrency = function (amount) { if (!amount) { return ""; } amount += ''; x = amount.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return "$" + x1 + x2; }

maggiekh · Accepted Answer · 2014-02-25 14:21:33Z

Knockout has these things called extenders which I think are useful in these cases. The example is for rounding, but it's easy enough to set it up to add a dollar sign or convert the currency. In this way you can also use the extender in other areas of your site which also need conversion/formatted to dollars.

Collectives™ on Stack Overflow

Knockout/JQuery currency format

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related