Formatting data as currency pulled from an API

Discussion Ask a question
,
1

Hey everyone,

So I’m trying to format data pulled from an API. The data is pulling and displaying just fine but I’d like to change the way it’s displayed. I know this topic has been covered before but it mostly relates to pulling and formatting data from a DB.

This is the code Im working with

import { getCryptoCurrencyInfo } from 'backend/serviceModule';
export function button1_click(event) {

 //Add your code for this event here: 
    console.log("Retrieving information for " + $w("#currencyInput").value);
    $w("#result").text = "Retrieving information for " + $w("#currencyInput").value;
    getCryptoCurrencyInfo($w("#currencyInput").value)
        .then(currencyInfo => {
            $w("#result").text = "Name: " + currencyInfo[0].name + "\n" +
 "Symbol: " + currencyInfo[0].symbol + "\n" +
 "Rank: " + currencyInfo[0].rank + "\n" +
 "Price Per Coin: " + currencyInfo[0].price_usd + "\n" +
 "Market Capitalization: " + currencyInfo[0].market_cap_usd + "\n" +
 "Percent Change - 1 hour: " + currencyInfo[0].percent_change_1h + "\n" +
 "Percent Change - 1 Day: " + currencyInfo[0].percent_change_24h + "\n" +
 "Percent Change - 1 Week: " + currencyInfo[0].percent_change_7d;
        });
}

and this is the code below that I think I’m supposed to use to format the amount I want in the correct currency, although I’m not sure 100% sure as to where I should place it.

function currencyFormat(num) {
  return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

Thanks for any help!
-Gabe

2

No need to use this regex.
javaScript has 2 different ‘built-in‘ easy-to-use methods to format numbers as currency:
See:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

2 Likes
3

Hey J.D.,

Thanks for the advice I went ahead and looked at the articles you sent and they were very helpful. I’m still struggling though in terms of locating the code snippet in the correct place. Below I’ve placed the new code begining with “var” and the console is logging the format correctly if I place dummy numbers there.

I’m not sure how to attach the particular line I want(price per coin, market cap) as the variable to format correctly.

import { getCryptoCurrencyInfo } from 'backend/serviceModule';
export function button1_click(event) {

 //Add your code for this event here: 
    console.log("Retrieving information for " + $w("#currencyInput").value);
    $w("#result").text = "Retrieving information for " + $w("#currencyInput").value;
    getCryptoCurrencyInfo($w("#currencyInput").value)
        .then(currencyInfo => {
 var number = // what goes here to make my below, price per coin and market cap to format correctly
                console.log(number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2, style: 'currency', currency: 'USD' }))
            $w("#result").text = "Name: " + currencyInfo[0].name + "\n" +
 "Symbol: " + currencyInfo[0].symbol + "\n" +
 "Rank: " + currencyInfo[0].rank + "\n" +
 "Price Per Coin: " + currencyInfo[0].price_usd + "\n" +
 "Market Capitalization: " + currencyInfo[0].market_cap_usd + "\n" +
 "Percent Change - 1 hour: " + currencyInfo[0].percent_change_1h + "\n" +
 "Percent Change - 1 Day: " + currencyInfo[0].percent_change_24h + "\n" +
 "Percent Change - 1 Week: " + currencyInfo[0].percent_change_7d;
        });
}

Thanks again!

4

Any thoughts on how I can go about this?

5

Anyone?

6

You have to run this method on the results (the currencyInfo)

7

Exactly as J. D. states add it to currencyInfo and not your console log.

As Majd (Wix Mod) states:
In javascript there is a function that turns numbers to strings called .toString(), it works like this:

var num = 15;
var n = num.toString();
console.log(typeof num, typeof n); //output: number, string
8

Thanks, @givemeawhisky , I went ahead and added it like so:

getCryptoCurrencyInfo($w("#currencyInput").value)
        .then(currencyInfo => {number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2, style: 'currency', currency: 'USD' })
            $w("#result").text = 
 "Name: " + currencyInfo[0].name + "\n" +
 "Symbol: " + currencyInfo[0].symbol + "\n" +
 "Rank: " + currencyInfo[0].rank + "\n" +

beginning on line 2 however, I receive an error message that states “number is undefined”. I’m unclear on why that is so.

I know that the code works, as I’ve tested each separately but when attempting to place them together I receive errors.

Thanks for any thoughts you may be able to offer.