Fetching JSON data array, how to use it with React Bootstrap Table?

Question

Check out my code here:

class HomePage extends React.Component {
    constructor() {
        super();
        this.state = {
            listing: [],
        };
    }

    componentDidMount() {
        fetch('https://api.coinmarketcap.com/v2/ticker/?convert=USD&structure=array')
            .then(data => {
                return data.json();
            }).then(data => {
            let listing = data.data.map((list) => {
                return (
                    <tr key={list.id}>
                        <td>{list.id}</td>
                        <td>{list.rank}</td>
                        <td>{list.name} </td>
                        <td>{list.quotes? (list.quotes.USD||{}).price||0 : 0}</td>
                        <td>{list.symbol}</td>
                        <td>{list.quotes.USD.volume_24h}</td>
                        <td>{list.quotes.USD.percent_change_24h}%</td>
                    </tr>
                )
            });
            this.setState({listing: listing});
            console.log("state", this.state.listing);
        })
    }

    render() {
        return (
            <div>
                <div className="jumbotron">
                    <div className="container">
                        <h3>Cryptocurrency Statistics</h3>
                        <br/>
                        <BootstrapTable data={this.state.listing} striped hover>
                            <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
                            <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Price</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                        </BootstrapTable>
                    </div>
                </div>
            </div>
        );
    }
}

export default HomePage;

I'm using coinmarketcap api. Retrieval works in normal html table but max data is 100 elements in this api. So I want to use pagination tables instead. Please suggest some other solution if this structure won't work.

Check out the fetch link to know how the JSON is returned from the api. — Soham Das
– Soham Das, Commented Aug 8, 2018 at 16:33
Add pagination prop to your BootstrapTable: <BootstrapTable data={this.state.listing} striped hover pagination> — Kevin Hernández
– Kevin Hernández, Commented Aug 8, 2018 at 16:36
Sorry I didn't put the pagination prop in this post, but it still doesn't work with it. — Soham Das
– Soham Das, Commented Aug 8, 2018 at 18:49

Vinhas · Accepted Answer · 2018-08-08 16:56:10Z

I'm not familiar with React Bootstrap Table, but the logic I'm suggesting probably fits any data table.

For what I quickly saw, the API supports start and limit options, so, what you need to do is move the fetch logic to a specific method and call it inside componentDidMount once. Then, buttons Next and Prev can call this method whenever you want to paginate data. You must keep track of the current page, tho.

PS: Bear in mind that I haven't tested this, but I hope you can understand the logic behind it.

class HomePage extends React.Component {
  state = { currentPage: 0, data: [], isLoading: false }

  fetchData = page => {
    this.setState({ isLoading: true })
    //Set it to the amount of records you want per page
    const rowsPerPage = 100
    const start = this.state.currentPage * rowsPerPage
    fetch(`https://api.coinmarketcap.com/v2/ticker/?convert=USD&structure=array&start=${start}`)
      .then(data => data.json())
      .then(({ data }) => {
        this.setState({
          data,
          currentPage: page,
          isLoading: false
        })
      })
  }

  componentDidMount() {
    this.fetchData(this.state.currentPage)
  }

  render() {
    const { currentPage, data, isLoading } = this.state

    // Always a good thing to check if the data is loaded
    if (isLoading)
      return <div>Loading...</div>

    // Maybe you'll need a better logic here
    const prevPage = currentPage === 0 ? 0 : currentPage - 1;
    const nextPage = currentPage + 1;

    // Implement your rendering logic here
    const rows = data.map(row => <tr><td>{row.name}</td></tr>)

    // Render the table
    // Take a look at the onClick handlers
    return (
      <div>
        <table>
          <tbody>
            {rows}
          </tbody>
        </table>
        <button onClick={() => this.fetch(prevPage)}>Prev</button>
        <button onClick={() => this.fetch(nextPage)}>Next</button>
      </div>
    )
  }
}
}

Thankyou so much! Had to do minor syntax changes in your provided code, the buttons are not always working properly, but I'll try to fix it! Thanks for the quick response!

Collectives™ on Stack Overflow

Fetching JSON data array, how to use it with React Bootstrap Table?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related