Formatting inner text dynamic data number to currency or just with commas?

Hi, I can see where we can format dynamic data inner text and did so yet when I preview in browser or even in the visual editor the whole field just disappears.
Without the additional code the number is queried successfully from the table. With it gone.
Here's the code Wappler came up with. Any ideas on this random bugginess?
serverconnect1.data.propertiesQuery[0].valuation.formatCurrency('$', '.', ',', 2)

Thanks

What data type are you trying to format?
Is this in a repeat region?
Please check the browser dev tools > console for errors.

Not repeating yet, I am still trying to build a card with dynamic data in it then later it will hopefully repeat. As I provided the code from Wappler I was trying to get it to be currency from a number in the table I queried. Also would be good to know how to just format with commas and no $, but either way this thing is not working so far for no apparent reason.

And then this from GPT: The error message you're seeing:

Method "formatCurrency" not found in expression: serverconnect1.data.propertiesQuery[0].valuation.formatCurrency('$', '.', ',', 2)

means that Wappler is trying to call a method (formatCurrency) that does not exist or is not recognized in the current context. It seems that the formatter you're trying to use is either not supported or hasn't been properly registered in your project.

What This Means:

  1. formatCurrency is not a built-in method in Wappler or JavaScript.
  2. Wappler might be trying to invoke it, but it's not defined or available within the data binding or Wappler's formatters.
  3. This error indicates that Wappler's formatter system doesn't have access to a method called formatCurrency.

Solutions:

1. Use .formatNumber() Instead:

If you're looking to format a number with commas (as discussed earlier), use .formatNumber() instead of .formatCurrency().

In your Wappler binding, it should look like this:

<p class="card-text" dmx-text="serverconnect1.data.propertiesQuery[0].valuation.formatNumber('0,0')"></p>

This will format the valuation with commas, e.g., 350000 becomes 350,000.

2. Custom Currency Formatting (JavaScript):

If you want to apply a currency format (with a dollar sign and decimals), you can implement custom formatting in JavaScript, as discussed previously.

Example:

var formattedValuation = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
}).format(valuation);

This would format 350000 as $350,000.00 using JavaScript, and you can apply this to your element as needed.

Why the Error Happens:

  • Wappler’s formatter system includes methods like formatNumber(), but there is no built-in formatCurrency() method, so it throws an error when it tries to execute it.

How to Fix:

  1. Replace the erroneous .formatCurrency() method with .formatNumber() in Wappler.
  2. If you're looking for more advanced currency formatting, stick to using JavaScript formatting like Intl.NumberFormat.

Let me know if this clarifies the error and helps you solve the issue!

Which also makes the number inner text vanish, using this: .formatNumber()

Please don't rely on chatgpt for helping with errors like this, it hallucinates way too much. No custom code is required to format a number or format currency :slight_smile:

So can you please post (a screenshot) of the exact error you are seeing from your browser dev tools console?

Also are you sure your database returns a number and that what you're trying to format is not a string?

Here's a screenshot of one of the errors, yes these are both numbers in postgres.

Can you check your page head tags and see if the dmxFormatter.js file is actually included there?
Seems to me either the formatter include is missing or the data type returned from your db is not a number, but string.

And I just checked the all the columns and their types in the table and they are all correct, those two are numeric, they were integer before, but I was trying different settings to see what would happen and nothing made a difference.

Here's a screenshot showing some of the data and the types for the columns.

I was able to set some of them to currency in Postgres which solved the problem for now of outputting formatted for currency, although it would be nice not to have the .00 at the end, but still nothing for just commas in numbers that aren't currency. It should not be this difficult irl. thx 4 your help.

I am a bit confused by your answer.

So the formatter js is missing from your head tags. Are you sure you added these formatters on the page using the formatter ui, or just entered them by hand in the code? The js include is automatically added in the head tags when you use the UI to format a value.

I don't understand what you mean here, sorry.

The only issue i see currently on your page is the formatter js missing in your head tags, the rest of your reply is not clear to me.

Sorry, I thought you meant the dmxAppConnect, no I do not see the formatter in the . Assuming that's the issue, although not sure why.

So this should be the issue there, probably you didn't save the main page when the include was added? Or you didn't add the formatting using the UI?

Adding the following in your code should fix the error:

<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>

assuming the formatter js exists in the dmxAppConnect folder of course :slight_smile:

It asks me to save all the time when I go to preview in browser so at the least it was saved then multiple times.
I added the script into the main.ejs file and saved that.
I re-added the formatting to the number in the inner text and saved that.
Still makes the field disappear immediately in the UI and then it is not there when I preview. Assuming this is the correct place and formatting I need which is what I set this number to and press select and when I get out of that the number vanishes still.

Used "save all" as well.

You can see the formatter is now in the
Thanks for that :slight_smile:
However still not working sadly.

Even tried to make it so there would only be commas and not the decimal but still not happening: serverconnect1.data.propertiesQuery[0].purchased_shares.formatNumber(',')

Do you still see the same error message?
If yes, please open the dev tools, network > XHR and see the response from your server action. Post a screenshot of what your server action returns where the purchased_shares value can be seen.
Most probably (if the formatter js is now included and existing on the server) the value is not a number but a string. So please post a screenshot of what the server action returns.

Are you sure also the server connect action returned any data?

You can open it in the browser to check.

Also you are using the first item from the returned results (item with index zero as [0] )

Usually you make a repeat region with the repeating element and use the values inside.

It might be useful to review the getting started tutorials on our YouTube channel and the data bindings getting started in our docs.

I got it working, with you extensive help. Thank you so much!
It was weird because in the database those columns were defined originally as integer then numeric and showed up in Wappler with the # in front of the name of the column. Then when I saw the fetch preview in dev tools they had "" around them so clearly as you surmised strings. Yet the other numbers which are small int did not and they are working fine this whole time. I changed them again to Integer and they started working finally with the formatting.

Sigh...on to the next issue, thanks again you rock!

1 Like