Displaying JSON data in Currency Format Rounded to the Nearest Whole Number

Question

I would like to display my numbers in a specific column in the currency format with the number rounded to the nearest whole number (no decimals).

Here is the code for my Bootstrap table: http://jsfiddle.net/bypbqboe/28/

Here is a sample of my JSON data from my Fusion Table:

[{
"0":"<a href =\"http://www.kia.com/us/en/vehicle/optima/2015/experience?cid=sem&ppc=y&story=hello\" target=\"_blank\">Kia Optima LX</a>",
"1":"95",
"2":"$182.95",
"3":22515,
"4":17629,
"5":595,
"6":0.55,
"7":12383.250000000002,
"8":0.00069,
"9":"36",
"10":"12,000",
"11":"Luxury",
"12":"Large",
"13":"",
"14":""
},
...

I want "7":12383.250000000002 (my Residual ($) column) to display as $12383.

I attempted to use .toFixed() in line 15-17:

for (var p=0; p<global_data.length; p++){
    global_data[p].7 = global_data[p].7.toFixed(1);
}

but it doesn't work.:/ I am new to programming. Your help will be much appreciated!

*"but it doesn't work"*: Could you please elaborate on that? Advice: Read this the MDN article about objects: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties — Felix Kling, May 18 '15 at 18:59
Duplicate: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript — TomSlick, May 18 '15 at 19:02
@FelixKling Thanks for the reference. Turns out I need to use the bracket notation as Robert has suggested below. By "it doesn't work" I meant the table doesn't load once I insert the code (line 17-19): http://jsfiddle.net/mademoiselletse/bypbqboe/31/ — Vic, May 18 '15 at 22:05
Have you user your browser's developer tools to find out why? E.g. does the console show an error what would indicate why the code does execute? — Felix Kling, May 18 '15 at 22:36

Yogi · Accepted Answer · 2015-05-18T23:38:55.540

You need to access the value using bracket notation. And you probably want toFixed(0).

for (var p=0; p<global_data.length; p++){
    global_data[p]["7"] = "$" + global_data[p]["7"].toFixed(0);
}

Reference: MDN: Property Accessors

Update: Response to Comment

I was able to make your fiddle code work with a couple of corrections. First, remove the extra character at the end of your script block. It looks like "-l" on line 156. Then the bracket notation was wrong, i.e., there were dots inserted between the brackets. Finally, the data being returned was sometimes NaN (not-a-number) which caused an error. The quickest fix for that was to add a try/catch block (there are better ways, but I'll leave that to you). Make these changes and it will work for you too. Good luck!

Here is the updated section with correct bracket notation and try/catch:

   for (var p=0; p<global_data.length; p++){
        try {
            global_data[p]["7"] = "$" + global_data[p]["7"].toFixed(0);
        } catch(e) { }
    };

And here is the incorrect code from your fiddle. Can you spot the mistake?

global_data[p].["7"] = "$" + global_data[p].["7"].toFixed(0);

Great thanks @Robert! I have inserted the code (line 17-19) but the table is not loading. Do you by any chance know the cause? http://jsfiddle.net/mademoiselletse/bypbqboe/31/ — Vic, May 18 '15 at 22:01
Thank you very much! It was indeed the dots and the "NaN" that caused the problems! Thanks for introducing to me the try to catch statement. It will be quite handy for me! — Vic, May 18 '15 at 23:58

Displaying JSON data in Currency Format Rounded to the Nearest Whole Number

1 Answers1