Number Formating - Please Help

Number Formating - Please Help
0

#1

I’m implementing a shopping cart script found on GitHub into my design.
The number values are without decimals and I would like to know how to edit the script so it will display .00 after the number values.
As far as I understand the script needs to be modified here:

	_convertString: function( numStr ) {
			var num;
			if( /^[-+]?[0-9]+\.[0-9]+$/.test( numStr ) ) {
				num = parseFloat( numStr );
			} else if( /^\d+$/.test( numStr ) ) {
				num = parseInt( numStr, 10 );
			} else {
				num = Number( numStr );
			}
			
			if( !isNaN( num ) ) {
				return num;
			} else {
				console.warn( numStr + " cannot be converted into a number" );
				return false;
			}
		},

Here the complete JavaScript
Any help would be very much appreciated.
Thank you


#2

Did you try using .toFixed(2) ?


#3

There is a private _formatNumber() function already made.


#4

… thanks for your replies.
If I change:

		_formatNumber: function( num, places ) {
			var n = num.toFixed( places );
			return n;
		},

To:

		_formatNumber: function( num, 2) {
			var n = num.toFixed( 2 );
			return n;
		},

It breaks the whole script.
How do I change it properly …?..


#5

Leave it as it originally was,

		_formatNumber: function( num, places ) {
			var n = num.toFixed( places );
			return n;
		},

But when you call it, call it like so: _formatNumber(233.544, 2)

That will set the value of num to 233.544 and the value of places to 2. This is the whole concept of parameters to functions.


#6

… tried it like you suggested, but it’s also not working and breaks the script.

		_formatNumber: function(233.544, 2) {
			var n = num.toFixed( places );
			return n;
		},

#7

Ok, @Job2Do, I think the whole referencing a function thing is messing you up. If you want to use the function _formatNumber(), then place that ABOVE your other functions, and leave it EXACTLY as you got it originally:

_formatNumber: function(num, places) {
  var n = num.toFixed( places );
  return n;
},

Just paste that, as is. Then, where you are trying to use two fixed decimal places, you call that function:

let aRandomNumber = 2365.4245;
let precision = 2;

// Now we create a string, which is the number formatted to a precision decimal
let myFormattedNumber = _formatNumber(aRandomNumber, precision);

The function itself isn’t entirely necessary, and in your case seems to have caused confusion. You could just as easily have done:

let aRandomNumber = 2365.4245;
let precision = 2;

// Now we create a string, which is the number formatted to a precision decimal
let myFormattedNumber = aRandomNumber.toFixed(precision);

#9

If you look in your github reference, you will find a function populatePayPalForm() – in that function, the last few lines use the this._formatNumber() function.

If you look further down in the source, you’ll find a function displayCart(). Within that, there are a few places where currency are being displayed. For example, around line 253. Where you see item.price or total, wrap those:

  var price = this.currency + " " + this._formatNumber(item.price, 2);

#10

… thanks a lot for trying to help, but no matter where I use you code suggestions the script breaks.
In fact I need the decimal for just price and subtotal.
It seems after trying so many variation I’m totally lost now …


#11

Did you clone the repo or do you have a fork, and if so are you pushing to it? It is a lot easier to help if we can see how you are using the code.

This would be ideal: Fork the repo, clone it, make your changes and push them, then post a link to your repo.


#12

… sorry. but I never done this before (fork and clone a repo) but I will look into this.
I’m one step ahead though by using the following script modifications:
Line 437:

		_formatNumber: function( num, places ) {
			var n = num.toFixed(2);
			return n;
		},

Line 253 replaced with:

var price = this.currency + " " + this._formatNumber(item.price, 2);

Now the item price displays the decimals.
Still need to this for subtotal as well and I’m done, but can’t figure it out on my own how to do it.
Hopefully someone can point me in the right direction like snowmonkey did.
Thanks to everybode giving me a hand here …


#13

There was absolutely no need to modify _formatNumber. All you had to do is call the original version like:

var price = this.currency + " " + this._formatNumber(item.price, 2);

since the original version was:

_formatNumber: function( num, places ) {
  var n = num.toFixed( places );
  return n;
}

#14

… yes, you are right, I changed it back to the original:

		_formatNumber: function( num, places ) {
			var n = num.toFixed( places );
			return n;
		},

It still works.
How do I go about the subtotal …?..


#15

Which line in the github code?


#16

… I think it’s Line 268


#17

So you are asking how to format the variable total to two decimal places in the line below?

this.$subTotal[0].innerHTML = this.currency + " " + total;

If so, surely with all of the information you have been given, you can figure this out. Think about what functions which have been discussed in this thread and try out some different ways. If you get stuck, then post what you tried for this line and tell us what the result was.


#18

… I tried to replace Line 268 with:

this.$subTotal[0].innerHTML = this.currency + " " + this._formatNumber(total, 2);

It didn’t work and I’m not even sure if line 268 is the correct line to apply changes …


#19

What happened when you made the change? Did you get any errors in the browser’s console?

I suggest you figure out what value should be adjusted and then try calling the the method on it.


#20

Yes, I got this error message in the console:

TypeError: num.toFixed is not a function[Learn More] jquery.shop.js:437:12

I never done anything like this in JavaScript and it’s very hard to understand.


#21

Without seeing the complete updated code for this project, it is very difficult to help you. I suggest putting it on either Codepen or JSFiddle, because then we can always view the latest version without you having to tell us what you have tried.

You might want to review the FCC’s JavaScript sections to help you get more familiar with how to understand and modify a code base structured in this manner. The Object Oriented Programming section would help you understand a lot more about this code.

We have no idea what level of JavaScript you are at, but it seems to be fairly basic based on the questions you have asked thus far about this code base.