cómo formatear mejor los datos extraídos de api en una tabla de diseño de hormigas

2022-07-11 23:44:06

Estoy tratando de agregar un prefijo de un signo de dólar, así como comas a ciertas columnas dentro de una tabla de diseño de hormigas con datos extraídos de una API.

Esto es lo que busco, parece que no puedo resolver esto y un par de cosas más para mi vida: ingresar imagen descripción aquí

  componentDidMount() {
    axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=24hr')
      .then(res => {
          const data = res.data;
          this.setState({ data })
      })
  }
  render() {
    const { data } = this.state;

    const tableData = data.map(row => ({
      Rank: row.market_cap_rank,
      Name: row.name,
      Price: row.current_price,
      Change: row.price_change_24h,
      totalVol: row.total_volume,
      marketCap: row.market_cap,
    }))

    const columns = [{
      title: 'Rank',
      dataIndex: 'Rank',
      key: 'Rank',
    }, {
      title: 'Name',
      dataIndex: 'Name',
      key: 'Name',
    }, {
      title: 'Price',
      dataIndex: 'Price',
      key: 'Price',
    }, {
      title: '24hr Change',
      dataIndex: 'Change',
      key: 'Change',
    }, {
      title: 'Total Volume',
      dataIndex: 'totalVol',
      key: 'totalVol',
    },

...

<Table rowKey='Name' columns={columns} dataSource={tableData} size="small"/>

También soy muy consciente de que el código que he escrito podría ser mejor y cualquier consejo o sugerencia sobre la clave de la tabla o cualquier otra cosa, ¡házmelo saber!

- user12347779

Source
zh
Responder


2
  • Esto necesita un poco de formato, lo probé hace mucho tiempo y la función que usé fue:

    value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    

    esto agregará $ y una coma en los lugares apropiados. Gracias