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

Question

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.

You say you're getting an error inside setState, can you show the error — linasmnew
– linasmnew, Commented Oct 6, 2017 at 12:32

Jalissa · Accepted Answer · 2017-10-06 12:38:40Z

1

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
           });
        })

answered Oct 6, 2017 at 12:38

Jalissa

8869 silver badges12 bronze badges

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

3 Comments

tshr Over a year ago

Thank You, Ma'am I have set data: [findresponse.data] but I faced problem in render() method plz help I want API data into page in table format.

Jalissa Over a year ago

@tshr findresponse does not have a .data it's just findresponse. What is the problem in the render method? What do you mean by table format ? in an HTML <table>?

tshr Over a year ago

yes Ma'am I have changed this.state { data: [findresponse] }

palasjir · Accepted Answer · 2017-10-06 12:26:31Z

0

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.

answered Oct 6, 2017 at 12:26

palasjir

2082 silver badges8 bronze badges

1 Comment

tshr Over a year ago

Thank You, sir but still facing problem

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related