How to get data from json using axios in react?

Question

There are two files reactjs.json in which..

{
    "642176ece1e7445e99244cec26f4de1f": 
    ["https://ih1.redbubble.net/image.487729686.1469/pp,550x550.jpg", 
    "https://ik.imagekit.io/PrintOctopus/s/files/1/0006/0158/7777/products/abey_pagal_hai_kya.png?v=1547744758"]
}

and index.html

<!DOCTYPE html>
<html>

<head>
  <title>Image Viewer-Static</title>
  <!-- <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    />
    <link
      rel="stylesheet prefetch"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="style.css" /> -->
</head>

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script type="text/babel">

    var imageslink;
class FetchDemo extends React.Component {
        constructor(props) {
          super(props);
        }


        render() {
          return (
            <div>
                <Pictures apikeys="642176ece1e7445e99244cec26f4de1f" />
            </div>
          );
        }

      }

      class Pictures extends React.Component {

      constructor(props) {
          super(props);
         axios.get('reactjs.json').then(
          res => {
            console.log(res.data);
             imageslink = res.data;
            console.log(imageslink);
        })
      }

        render() {

          return (
          <div>
              {imageslink[this.props.apikeys].map(function(name, index){
                    return <img key={index} src={name} />;
                  })}
          </div>

           );
        }
      }

      ReactDOM.render(
        <FetchDemo/>,
        document.getElementById("root")
      );
    </script>
</body>

</html>

Error: Actually I want to fetch data from the reactjs.json file into the index.html using ajax in react. I am using axios for this and for react I am using cdn. But I am unable to fetch the data .

I tried to put it in componentDidMount() in FetchDem class but not works so I PASSED IT INTO THE CONSTRUCTOR but still I am unable to access the data.

So my question is how to acess the data from reactjs.json file to index.html?

assign response imagesLink to a state

Agney
– Agney

2019-02-20 18:04:13 +00:00
Commented Feb 20, 2019 at 18:04 — Agney
– Agney, Commented Feb 20, 2019 at 18:04
did you mean this.setState{imageslink:res.data};

Ayush Srivastava
– Ayush Srivastava

2019-02-20 18:29:46 +00:00
Commented Feb 20, 2019 at 18:29 — Ayush Srivastava
– Ayush Srivastava, Commented Feb 20, 2019 at 18:29

Jordan Enev · Accepted Answer · 2019-02-21 09:07:13Z

1

React documentation recommends using componentDidMount for API calls.

Also when you fetch the data, you have to keep it in the state. Later the data will be available in the render method.

Here's how you have to tune-up you code:

constructor(props) {
    super(props);

    this.state = {  imageslink: null }
 }

componentDidMount() {
    axios.get('reactjs.json').then( res => {
      this.setState({ imageslink: res.data })
    })
}

render() {
  const { imageslink } = this.state

  if (imageslink) {
  // Here you can access this.state.imageslink,
  // because they will be fetched.
  }
}

Here's a generic Axios React example:

class App extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = { users: [] }
  }
  
  componentDidMount() {
    axios.get('https://reqres.in/api/users?page=1')
      .then(response => this.setState({ users: response.data.data }))
  }
  
  renderUsers() {
    const { users } = this.state
    
    return users.map( user => (
      <div key={user.id}>{user.first_name} {user.last_name}</div>
    ))
  }
  
  render() {
    return <div>{ this.renderUsers() }</div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

edited Feb 21, 2019 at 9:07

answered Feb 20, 2019 at 19:00

Jordan Enev

18.8k3 gold badges45 silver badges68 bronze badges

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

3 Comments

Ayush Srivastava Over a year ago

can you provide jsfiddle for this @jordanenev

Jordan Enev Over a year ago

Here's a great article for using Axios in React. It follows the same idea as my answer.

Jordan Enev Over a year ago

@AyushSrivastava I've added a working Axios example, where I'm calling a public JSON API (with fake users) and I'm listing the response. I'm sure you can tune it up to your needs. Cheers! :)

Collectives™ on Stack Overflow

How to get data from json using axios in react?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related