How to convert numbers from string to float with following zeros in JavaScript? [duplicate]

Question

In my react app, I'm receiving a cost (like 990.00) from the API as a string. I'm storing it in a material UI table with sorting function. To sort the cost, it should be in number format. I'm using toFloat() to convert it to a number but I get 900 only. If I modify it to toFloat().toFixed(2), it will be convert again into a string. If I modify it to toFloat().round(2), no output at all.

var cost = '900.00'
var numericCost = toFloat(cost) //type - number but no decimal zeros
var numericCost = toFloat(cost).toFixed(2) //type - string, so can't sort it
var numericCost = toFloat(cost).round(2) //no output (can't see the data)

How do I get that number with type - number with following decimal zeros ?

Here is the Sorting method:

let counter = 0;
function createData(projectId, projectName, projectStatus, totalCost, paymentStatus, clientName, email, phone) {
    counter += 1;
    return { id: counter, projectId, projectName, projectStatus, totalCost, paymentStatus, clientName, email, phone };
}

function desc(a, b, orderBy) {
    if (b[orderBy] < a[orderBy]) {
        return -1;
    }
    if (b[orderBy] > a[orderBy]) {
        return 1;
    }
    return 0;
}

function getSorting(order, orderBy) {
    return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
}

class AllTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            order: 'asc',
            orderBy: 'userName',
            data: [],
        };
    }

componentDidMount() {
        API.get('url')
            .then(({ data }) => {
                this.setState({
                    data: data.response.map(
                        job => (
                            createData(
                                job.project_id,
                                parseFloat(job.total),
                                job.payment_status,
                            )
                        )
                    )
                })
            })
            .catch((err) => {
                console.log("AXIOS ERROR: ", err);
            })
    }

handleRequestSort = (event, property) => {
        const orderBy = property;
        let order = 'desc';
        if (this.state.orderBy === property && this.state.order === 'desc') {
            order = 'asc';
        }
        this.setState({ order, orderBy });
    };

    render(){
      return(
          {data
            .sort(getSorting(order, orderBy))
               .map(n => {
                  return (
                    <TableRow
                        hover
                        tabIndex={-1}
                        key={n.id}
                    >
                       <TableCell className={classes.tdWidth}><div className={classes.cellWidth}>${n.totalCost}</div></TableCell>
                       <TableCell className={classes.tdWidth}><div className={classes.cellWidth}>{n.paymentStatus}</div></TableCell>
                    </TableRow>
           })}
      )
}

}

You don't; a number cannot store following zeros. This is most likely an XY problem, please tell us what your goal is. — user5734311
– user5734311, Commented May 16, 2019 at 8:00
I don't see the issue tbh; 1. api response 2. parse to float 3. sort 4. output as toFixed(2) — user5734311
– user5734311, Commented May 16, 2019 at 8:03
Possible duplicate of javascript number precision without converting to String and How can I round a number in JavaScript? .toFixed() returns a string? — adiga
– adiga, Commented May 16, 2019 at 8:03

MidnightLightning · Accepted Answer · 2019-05-16 14:01:10Z

1

The core issue you're trying to solve is sorting by some version of the number (a numeric value), and then displaying another (a string, with defined precision). The solution is to separate out those two concerns, such that you're not using the same value to both sort and display:

render() {
  let data = this.props.data.sort((a, b) => {
    // This is the sorting function, so we need to treat the values as a number
    return toFloat(a.cost) - toFloat(b.cost);
  });

  return data.map(n => {
    // Now we're showing the data, so treat it as a string
    // It's already a string fetched from the API in the format needed, so just use directly
    return (
      <TableRow key={n.id}>
        <TableCell>{n.cost}</TableCell>
      </TableRow>
    );
  });
}

answered May 16, 2019 at 14:01

MidnightLightning

7,0087 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MAHFOUDH KERBOUCHE · Accepted Answer · 2019-05-16 09:17:21Z

0

So i will reformule my Answer, toFixed always returns a string number because in javascript decimals can't be represented in binary floating-point systems with full accuracy, for example 10.2 is in fact 10.2........ (many numbers after decimal point)

so to fixed cuts a part of the number as a string in order to give us the result that we want with precision.

in order to fix this you need to create your own function, and here's a link to help you: https://exoboy.wordpress.com/2011/07/14/the-problems-with-tofixed-in-javascript/

you will need the following code: (i'm not the owner of the code i got it from the link that i mentionned)

Number.prototype.trimNum = function(places,rounding){

(rounding != 'floor' && rounding != 'ceil') ? rounding = 'round' : rounding = rounding;

var result, num = this, multiplier = Math.pow( 10,places );

result = Math[rounding](num * multiplier) / multiplier;

return Number( result );

}

so to call this function you just have to use num.trimNum( places, rounding ); where places are number of places after decimal point, and rounding is a string value ('round'/'ceil'/'floor')

This will solve your problem in most of the cases, but in your case '999.00' it will still show 999,but it won't affect the result because 999 and 999.00 will have the same result

edited May 16, 2019 at 9:17

answered May 16, 2019 at 8:08

MAHFOUDH KERBOUCHE

1911 silver badge5 bronze badges

2 Comments

adiga Over a year ago

Please read the question: "If I modify it to toFloat().toFixed(2), it will be convert again into a string"

MAHFOUDH KERBOUCHE Over a year ago

i have edited the answer,i hope it will help you, good luck.

shim · Accepted Answer · 2019-05-16 15:22:35Z

-1

Try this:

var cost = '900.00'
var numericCost = parseFloat(cost).toFixed(2)

edited May 16, 2019 at 15:22

shim

10.3k13 gold badges79 silver badges121 bronze badges

answered May 16, 2019 at 8:06

Anantha Bhat

14

1 Comment

adiga Over a year ago

Please read the question: "If I modify it to toFloat().toFixed(2), it will be convert again into a string"

Collectives™ on Stack Overflow

How to convert numbers from string to float with following zeros in JavaScript? [duplicate]

3 Answers 3

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Linked

Related