Question

I need to add currency output to a jQuery function. So that a number like 1577334.668 will print as $1,577,335. I thought that I should do this in the controller but my boss told me today that I should do this task in the jQuery view I just don’t know how to do it. I have included the jQuery code below and have added comments next to the variable that I need to print the amount in currency. The variable is called SC[i]. Any advice or suggestions will be appreciated! Thanks for your help!

 //Spend Category function for monthly
        pa_click = function (pa_label) {
            PA_ID = pa_label.getAttribute('pa_id');

            var pa_details = document.getElementById('pa-details-' + PA_ID);

            jQuery.getJSON('@Url.Action("getAjaxSCs")', { PA: pa_label.title }, function (SCS) {
                pa_details.innerHTML = "";
                jQuery.each(SCS, function (index, SC) {
                    months_html = '';

                    for (var i = 0; i < 12; i++) {

                        months_html +=
                                            '<div id="SC-' + index + '-' + months[i] + '" class="month-wrapper tree border-white">' +
                                            SC[i] + // This is the variable I need to replace with code to add currency to the amount  
                                            '</div>';
                    }

                    pa_details.innerHTML +=

                            '<div id ="Spend-Category-' + index + '" class="sc-wrapper tree border">' +
                                '<div id ="sc-title-' + index + '" class="sc-title">' +
                                    '<div class = "sc-label" title = "' + index + '" SC_id="' + index + '" onclick = "sc_click(this)">' + index + '</div>' +
                                    months_html +
                                '</div>' +
                                '<div id="sc-details-' + index + '" class = "pa-details" style = "display:none">' + index + '</div>' +
                            '</div>';
                })
            });
            jQuery('#pa-details-' + PA_ID).show('slide', { direction: 'up' }, 'fast');

        };

Answer 1

This jQuery plugin will help you : Format Currency

Add a class to this line(e.g currency)

months_html +='<div id="SC-' + index + '-' + months[i] + '" class="month-wrapper tree border-white currency">' +
SC[i] + // This is the variable I need to replace with code to add currency to the amount  
'</div>';

And then $(".currency").formatCurrency(); will do the trick.

The page also has some demos that may help you get started