We Keep Coding

Correctly format a whole number to a 2 decimal places output in JS but put 0 in front [duplicate]

I have a script which returns a price for a product. However, the price may or may not include trailing zeros, so sometimes I might have 258.22 and other times I might have 258.2. In the latter case, I need to add the trailing zero. How would I go about doing this?

You can use javascript's toFixed method (source), you don't need jQuery. Example:
var number = 258.2;
var rounded = number.toFixed(2); // rounded = 258.20
Edit: Electric Toolbox link has succumbed to linkrot and blocks the Wayback Machine so there is no working URL for the source.

Javascript has a function - toFixed - that should do what you want ... no JQuery needed.
var n = 258.2;
n.toFixed (2); // returns 258.20

I don't think jQuery itself has any string padding functions (which is what you're looking for). It's trivial to do, though:
function pad(value, width, padchar) {
while (value.length < width) {
value += padchar;
}
return value;
}
Edit The above is great for strings, but for your specific numeric situation, rosscj2533's answer is the better way to go.

Javascript function to determine if a value is an integer

I came across a problem where I needed to determine if the field being entered by the user was an integer or float. The answer would then preselect a drop down further along a form. After much digging I found lots of framework code but none that actually did the job properly. The test data I used was;
Blank answer,
Non Numeric (Alpha),
1.0,
10,
1.10,
2.4,
3.0,
0.30,
0.00
A lot of other posts were also tested with the above data and I could not find one that passed ALL of the data correctly.
So I have written the following so that it may be reviewed by your good selves and hopefully it will help someone else out should they come across the same situation.
function isInteger(value)
{
//if(isNaN(value))return Nan;//optional check
//test for decimal point
if(!( /^-?\d+$/.test(String(value))))
{
//decimal point found
//if parseInt changes value it must be a float
if(parseInt(value) / 1 != value)return false;
}
//no decimal point so must be integer
return true;
}

Testing for integer values
ECMAScript 6 standard introduces a Number.isInteger().
This function is not yet supported by all major browsers, but a polyfill is listed on the site:
Number.isInteger = Number.isInteger || function isInteger (value) {
return typeof value === 'number' &&
isFinite(value) &&
Math.floor(value) === value
}
In case of user input (which is a string, not an integer), we can use the Number function to perform a type conversion into a number:
var input = '123' // Imagine this came from user
if (Number.isInteger(Number(input)) {
// User entered a valid integer value
}
Note, however, that the type conversion returns a valid integer-like value even for hexadecimal or octal strings. If this is not desired, you would need to further validate the original string. For detailed information about how the type conversion works, see MDN.
If such strict validation is desired, MDN also provides a good implementation using Regex (see the link for example output):
function filterInt (value) {
if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
return Number(value)
return NaN
}
Testing for floating point numbers
isFinite() in combination with Number.isInteger() can help achieve our goal.
In case of user input (which is a string, not a float), we must use the Number function to perform a type conversion into a number:
var input = '123.5'
// Perform type conversion to a number
input = Number(input)
if (Number.isFinite(input) && ! Number.isInteger(input)) {
// A finite number that is not an integer can only be a float
}
Alternatively, a stricter variant of the parseFloat() implementation may be used instead, as listed on MDN (see the link for example output):
function filterFloat (value) {
if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
.test(value))
return Number(value)
return NaN
}

Since you've mentioned user inputs, your question is about strings, so Number.isInteger is not an option.
To answer this question correctly we have to define more precisely what "integer" means when applied to strings. Is it
a sequence of digits? (example: ১২৪৫)
or a sequence of arabic digits? (example: 0000001)
or any mathematically valid integer representation? (example: 989238402389402394820394802)
or a mathematically valid integer that can be represented exactly in Javascript (i.e. it's less than MAX_SAFE_INTEGER)?
My guess is that you're looking for 4), here's the code for this case:
function isValidIntegerRepresentation(str) {
return /^-?\d+$/.test(str) && String(Number(str)) === str;
}
test = ['0', '00', '123', '-123', '239482039482309820394820394'];
test.forEach(function(n) {
document.write(n + "=" + isValidIntegerRepresentation(n) + "<br>");
});
This is very similar to what you already have.

Angular giving error "Model is not of type `number`" when typeof === number

As a work around to not being able to filter inputs without directives I've attempted the following:
On the input ngChange detects a change and runs a function. The input has type="number"
<input type="number"
ng-model="ctrl.met.mass"
ng-change="ctrl.met.update.mass()">
The function updates some other fields, then formats them. In this example I want it to display two decimal points with toFixed(2). This is done with variable = variable.toFixed(2)
ctrl.met.cost = ctrl.met.mass * ctrl.met.price;
ctrl.imp.mass = ctrl.met.mass * 0.0353;
ctrl.imp.cost = ctrl.imp.mass * ctrl.imp.price;
console.log(typeof ctrl.met.mass); // number
ctrl.met.mass = ctrl.met.mass.toFixed(2);
console.log(typeof ctrl.met.mass); //string
But the number isn't formatting as well as I'm receiving this error; note the number at the end of the URL is 29.00, being the desired result. If the number is 12.34 that would be in place of 29.00.
Error: ngModel:numfmt
Model is not of type `number`
But when I run typeof ctrl.met.mass at any point, or any other variable I'm working with, it's telling me it is in fact a number except after .toFixed() has interacted with it.
The same error has occurred with the Angular Number Filter (after injecting), parseInt(), parseFloat(), and toPrecision() (to a precision of 4, to ensure two decimal places for a two digit number).
ctrl.met.mass = $filter("number")(ctrl.met.mass, 2);
ctrl.met.mass = $filter("number")(parseInt/Float/Precision(ctrl.met.mass), 2);
ctrl.met.mass = ctrl.met.mass.toInt/Float
ctrl.met.mass = ctrl.met.mass.Precision(4);
I'm thinking I won't be able to do so this way, and will need to use a directive. Before I try that though, why is this happening and can it be worked around?
edit: It seems what I'm trying is impossible. Upon setting ctrl.met.mass to what was, without a doubt, a number with two decimal places it rejected it in preference for an integer. If anyone knows why this is the case, please share.

The returned value from the toFixed method is a string. So you need to convert it to float in your controller:
var fixed = ctrl.met.mass.toFixed(2);
ctrl.met.mass = parseFloat(fixed);

you can make a stringToNumber directive to parse string to number, the perfect example of this is shown at below link :
https://docs.angularjs.org/error/ngModel/numfmt

Are there floating-point numbers in JavaScript?

I see many questions about methods to detect if a value is a floating-point number, but none of the examples work on numbers like as 1.0, 5.0, etc.
Is it possible to distinguish between numbers like 1 and 1.0 or 5 and 5.0? If yes, how can you detect a floating-point variable type?

In Ecmascript 6, you can use isInteger:
var value = . . .;
Number.isInteger(value);
However, this is not widely supported yet. For now, you can use this:
function isInteger(value) {
return typeof value === 'number' && (value | 0) === value;
}
This should work for all integer values that can be represented exactly in a 64-bit floating point representation.

I think the more concise answer is this one :
In javascript : 5 === 5.0.
So from this point on, no way can be found to distinguish them.
They are strictly the same thing.
Edit : reminder : the only x such as (x!==x) in javascript is NaN.

Zerstoren, the others are technically right: in javascript if you enter 2.0 or 2, there is no difference on how data is stored internally, so there is no way to find out if data was originally written as integer or float.
However, in case you want to validate some user form data, so that the user enters only integer numbers (e.g. order 2 pizzas, not 2.0) then the you do have a solution because that's actually a string (hence "2.0" is not same as "2"). You can use
typeof(n) =="string" && parseInt(n, 10) == n && n.indexOf('.')==-1
The first typeof condition is so that you fall under data is still in string format case I mentioned. See here: http://jsfiddle.net/X6U2d/
Andrei

There is no such thing as a float or int basic types in JavaScript, only a number. So, there is no difference between 5.0 and 5.
If it is important to you (for whatever reason), you will need to store the value as a string then use parseFloat to extract the value.
For example:
var int = "5";
var float = "5.0";
console.log(int == float); // false
console.log(parseFloat(int) == parseFloat(float)); // true
How to print numbers to fixed number of decimal places
I've just spotted Zerstoren comment: "i get data from mongodb and want to print this data with strong typing."
The method toFixed can be used to print a number to fixed number of decimal places:
var num = 5;
console.log( num.toFixed(1) ); // 5.0

Converting Text Field to Numerical Value (Getting NaN)

I have this bit of code, it's supposed to take the value from one field, and calculate the value from it based on a certain percentage (in this case 60%).
I created a hidden field to store the value in the html, but when I run the calculation and check it in Firebug it gets a NaN value. Can anyone tell me what I can do to produce the number I need?
(Apply_RequestedAmtX_r != 0 & Apply_RequestedAdvanceAmtY_r !=0){
var AmtX= ($('#Apply_RequestedAdvanceAmtX_r').val());
var AmtY= ($("#Apply_AmtYAfterSplit_r").val());
var MaxAMT = parseInt((AmtY*60)/100);
$('#mna').val(MaxAMT

val returns a string. Now, the way you're using those variables, they'll get automagically converted to numbers (although it's best practice to parse them yourself).
One or the other of your values has a character in it that prevents the value from being automatically converted to a number; and then since that's NaN, any math involving it will be NaN. If you examine AmtX and AmyY in Firebug before using them, you should see whatever that character is.
Again, parsing isn't the actual problem here, but you're using parseInt in exactly the wrong place (unless you were trying to use it to truncate the fractional portion of the number, in which case there are better choices). Here are the right places:
var AmtX= parseInt($('#Apply_RequestedAdvanceAmtX_r').val(), 10);
var AmtY= parseInt($("#Apply_AmtYAfterSplit_r").val(), 10);
var MaxAMT = (AmtY*60)/100;
MaxAMT will likely have a fractional portion. If you want MaxAMT to be an integer, then:
var MaxAMT = Math.round((AmtY*60)/100);
// or
var MaxAMT = Math.floor(AmtY*60)/100);
// or
var MaxAMT = Math.ceil(AmtY*60)/100);
...depending on your needs.