Adding commas to numbers pulled from collection

Ask the community
,
1

How do I display numbers with the comma separators? They appear in my collections, but not in the repeater or table that pulls from those collections. For instance, I need 1000 to appear as 1,000 or 50000 to appear as 50,000.

2 Likes
2

you should use toLocaleString() .

For example:

var number = 3500;
console.log(number.toLocaleString()); // Displays "3,500"
3

Hi Ohad,

I’m getting “NaN” in the console log and the number on the site isn’t changing. Here’s my code:

var number = Number($w(“#text34”).text);
console.log(number.toLocaleString());
});

4

You need to check what you get for $w(" #text34 ").text. If it’s not a string representation of a number (meaning no characters other than digits), you’ll get NaN for it. You can check it by writing it to console.

Also, in order to change how it’s displayed, you need to set the value back to the text component:

$w("#text34").text = number.toLocaleString()
5

#text34 is being populated by a connected dataset and the connected data is of type Number.

Here’s the revised code:
console.log($w(“#text34”).text);
var number = Number($w(“#text34”).text);
console.log(number.toLocaleString());
$w(“#text34”).text = number.toLocaleString();
});

And here’s the log:
< Score >  ( is the placeholder text while editing that is replaced by a number from the dataset in Preview/Live)
NaN

6

if you get the text “” in your console it probably means that the dataset didn’t load its data yet.
make sure to put this code within the dataset’s onReady() .

7

It is:

$w.onReady(function () {

console.log($w(“#text34”).text);
var number = Number($w(“#text34”).text);
console.log(number.toLocaleString());
$w(“#text34”).text = number.toLocaleString();
});

I don’t understand why it’s not working =(

8

As I wrote, make sure to put this code within the dataset’s onReady() .

9

Sorry, mis-read your message. I revised the code and I’m still getting the same logs:

$w.onReady(function () {
$w(“#dataset2”).onReady(() => {
console.log($w(“#text34”).text);
var number = Number($w(“#text34”).text);
console.log(number.toLocaleString());
$w(“#text34”).text = number.toLocaleString();
});
});

Thank you for your help. If it’s not obvious, I’m new at this.

10

Hi,
Please send your editor’s URL so we can inspect.

11

Well… It’s been a while, but I’m having the same issue.
I’ve been following the suggestion, obtaining a “NaN” both in consolle and preview.
As far as I can tell, the script is just overriding or ignoring the data pulled from the dataset.
In fact, if in my text field i put a placeholder number, i will get that number, plus the comma. Not the data pulled.
While if I use a text placeholder. I’ll get NaN, while getting the pulled value in the text field (with no comma)

here is the snip of code for it

 
$w.onReady(() => {
    $w("#dataset1").onReady(() => {
        console.log($w("#priceText").text);
 var number = Number($w("#priceText").text);
        console.log(number.toLocaleString());
        $w("#priceText").text = number.toLocaleString();
    });
});
12

Did you ever figure this out?

13

Michael – I got the below code to work for me for a table (with some logs thrown in to verify the before and after of the comma). Just make sure the field in the database is set to be of type Number:

Update the following fields for your own code:
#dataset2 = your dataset
#table1 = your table
oldScore = whatever you want to name the # before the comma is added
“totalScore” = the name of the column in the dataset that contains the number being revised
revisedScore = whatever you want to name the # after the comma is added

Code:
$w.onReady( function () {
$w(“#dataset2”).onReady(() => {
let rows = $w(“#table1”).rows;
let count = $w(“#table1”).rows.length;
for ( let i = 0; i < count; i++) {
let oldScore = rows[i][“totalScore”]
console.log("old score is " + oldScore);
var number = Number(oldScore)
console.log("revised score is " + number.toLocaleString());
let revisedScore = number.toLocaleString();
rows[i][“totalScore”] = revisedScore;
}
$w(‘#table1’).rows = rows
})
})

14

Hi,

By any chance that any one encountered the same “NaN” issue once you place the text element inside a repeater?

The code was actually function but only outside the repeater and “NaN” inside of it.

Help?

15

Well, I got it to work perfectly as I want. I have another question though. Is there a way to make it connect to dataset item column instead of manually copy-pasting the code for each #text

So that any text that is connected to an element in the “Price” column is automatically adjusted to show the format.

Thanks

16

Omar, do you mind posting your code so we can see how it was done?