CODEWITHSUNDEEP
javascriptreactjsfetch-api
Ras
Ras

Reputation: 1031

React js - fetch API - TypeError: ticker.map is not a function

I'm trying to get fetch data from here and showing it to my page using react.js, but I have an error when try to run the code, error shown:

"TypeError: ticker.map is not a function".

This is my code:

class App extends Component {
constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    ticker: []
  };
}
componentDidMount() {
  fetch("https://vip.bitcoin.co.id/api/btc_idr/ticker")
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          ticker: result.ticker
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
}
render() {
  const { error, isLoaded, ticker } = this.state;
  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {ticker.map(item => (
          <li key={item.name}>
            {item.high} {item.low}
          </li>
        ))}
      </ul>
    );
  }
}}

Upvotes: 2

Views: 3099

Answers (3)

Kodanda Rama Durgarao poluri
Kodanda Rama Durgarao poluri

Reputation: 554

1) First push the new data into the state in the following manner

this.setState({
    isLoaded: true,
    ticker: [...this.state.ticker, result.ticker]
});

2) As it is asynchronous it may take time and data may not be available at that moment. So check the data in state before using map.

return (
      <ul>
        {ticker && ticker.length > 0 && ticker.map(item => (
          <li key={item.name}>
            {item.high} {item.low}
          </li>
        ))}
      </ul>
    );

Upvotes: 0

Rishikesh Dhokare
Rishikesh Dhokare

Reputation: 3589

https://vip.bitcoin.co.id/api/btc_idr/ticker is returning a json object and not an array. 

{
    "ticker": {
        "high": "154922000",
        "low": "148658000",
        "vol_btc": "479.49235295",
        "vol_idr": "72668242553",
        "last": "148659000",
        "buy": "148657000",
        "sell": "148659000",
        "server_time": 1517320859
    }
}

Now, you can not call a map function on an object. That is why you are getting

"TypeError: ticker.map is not a function"

So, first thing you can do is change your state like follows so that ticker is an empty object and not an array - 

this.state = {
    error: null,
    isLoaded: false,
    ticker: {}
  };

And since its just one object and not an array, you can change the markup as follows - 

<ul>   
  <li>{this.state.ticker.high} {this.state.ticker.low}</li>
</ul>

Note that the ticker object in the state is empty until you fetch it.

Upvotes: 1

Gasim
Gasim

Reputation: 7991

Ticker returned from the API is an object, not an array and you are trying to map an object, which is is giving you an error. Are you trying to add objects to your array or just having one object. Here is the line that I am talking about:

this.setState({
    isLoaded: true,
    ticker: result.ticker
});

If you need a single object, remove the map function and just use (render):

 <li key={ticker.name}>{ticker.high} {ticker.low}</li>

However, if you want to keep adding the objects to your array, just do something like this (componentDidMount):

this.setState({
    isLoaded: true,
    ticker: [...this.state.ticker, result.ticker]
});

Upvotes: 0

Related Questions