Format Large Currency Number to K or M

Need help
1

Hi Bubble Community:

I am new to Bubble and currently checking out Bubble to build a real estate app. I am having problem trying to shorten large currency number e.g. $500,000 or $1,000,000 to $500K and $1M respectively for google map markers.

Appreciate any help or advice please.

thanks!
leon

1 Like
2 
function fnum(x) {
	if(isNaN(x)) return x;

	if(x < 9999) {
		return x;
	}

	if(x < 1000000) {
		return Math.round(x/1000) + "K";
	}
	if( x < 10000000) {
		return (x/1000000).toFixed(2) + "M";
	}

	if(x < 1000000000) {
		return Math.round((x/1000000)) + "M";
	}

	if(x < 1000000000000) {
		return Math.round((x/1000000000)) + "B";
	}

	return "1T+";
}

Use above funtion to convert your number to shorten

3

Thanks @manikandan for your response and solution and as this is my first time trying to use a script in Bubble, hope you do not mind explaining how to attach and run the script dynamically to update google map markers with shorter currency form upon page load.

4

You can use below plugin to implement above one.

5

I did use the Toolbox plugin for the script but not sure how to attach it to the marker to display the short form dynamically. Do I use the script when user inputs the currency field and store it into the database before displaying the short form on the google map markers?
thanks again for your help!

6

Hi leon… i am searching for this answer too… have you figured it out?

7

i haven’t figured it out yet and will be trying out a few options to see if it works. Hope someone will chime in here to throw some lights :slight_smile: .

8

Hi,
Let me suggest another javascript way to achieve the same result

(function(x) {
if(x < 9999) {
		return x;
	}

	if(x < 1000000) {
		return Math.round(x/1000) + "K";
	}
	if( x < 10000000) {
		return (x/1000000).toFixed(2) + "M";
	}

	if(x < 1000000000) {
		return Math.round((x/1000000)) + "M";
	}

	if(x < 1000000000000) {
		return Math.round((x/1000000000)) + "B";
	}//and so on... 
return "the number is too big;})

Defining a function between parenthesis allow you to call it in place, without even giving it a name.
That allows you to pass a single value to it (the number you wish to format) and retrieve the result of the function using the “Expression” element from the toolbox plugin using this syntax :
(function(x) {if... ...})(Your_Number);
just as in this example :

Sans titre
Sans titre817Ă—873 64.1 KB

Where “Expression B’s value” is my number

You can see it working here https://bubble.io/page?name=index&id=tests-app&tab=tabs-1

Hope I helped :slight_smile:

1 Like
9

You can do it with bubble conditions ?

image
image351Ă—877 20.9 KB

You can probably get even cuter with modulos and do 3.4k rather than 3.40k

6 Likes
10

thanks Stern for the advice and it works great! :slight_smile:
It really helps me greatly and now i have a better understanding of using javascript script in Bubble. :+1: Just wish that there are more info like this in Bubble documentation / manual.

1 Like
11

Thanks Nigel and this works great too!
Appreciate your tips to achieve the same results without using any script :+1:!
As i learn more about Bubble, it seems like a powerful and sophisticated no-code development platform but it lacks good in-depth user guide for non-developers and newbies and learning Bubble is a “trial and error” with lots of “hit & miss”. just my 2 cents!

1 Like
12

Agreed. The forum has a huge amount of information, but it can be hard to find things sometimes.

2 Likes
13

Thanks @stern.solal @NigelG for the tips. You guys are what makes this community better. Without such tips and suggestions, newbies like me will never take off, given the lack of organized documentation in Bubble.

1 Like
14

Not only this solves the problem but i am seeing considerable speed in showing data this way. The older way of showing whole number is taking more time to load than this…

Thanks so much again.

1 Like
15

This topic was automatically closed after 70 days. New replies are no longer allowed.