CODEWITHSUNDEEP
jsonreactjsapi
tshr
tshr

Reputation: 17

How to fetch JSON API data and show that on Page using react.js

I want to fetch all data from "https://blockchain.info/api/exchange_rates_api" and show that on Page. I tried it but got an error message. Here is my Code :

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super();
      this.state = {
        data: []
        }
    }

    componentDidMount() 
    {
      fetch("https://blockchain.info/ticker").
        then((Response) => Response.json()).
          then ((findresponse)=>
            {
              console.log(findresponse)
              this.setState({
                data:findresponse
                  });
            }) 
    }

    render() 
    {
      return(
        <div>
          {
            this.state.data.map((dynamicData, Key) =>
              <div>
                <span>{dynamicData}</span>
              </div>
            )
          }
        </div>
        )
    }
}

export default App;

I got an error in setState method. When I m trying to write without setState method, I got data in the console. But I want data on the page in Table form.

Upvotes: 0

Views: 919

Answers (2)

Jalissa
Jalissa

Reputation: 876

You are getting an object from the API call but you need an array in order to use map, so you need to do this:

fetch("https://blockchain.info/ticker").
   then((Response) => Response.json()).
     then ((findresponse)=>
        {
          this.setState({
            data: [findresponse] //wrap findresponse brackets to put the response in an array
           });
        })

Upvotes: 1

palasjir
palasjir

Reputation: 208

Problem is that what you receive as JSON response from api call is an object not array. Objects don't have defined map function. First you need to convert object into an array.

Upvotes: 0

Related Questions