CODEWITHSUNDEEP
jsonreactjsfetchaxiosco
fearofmusic
fearofmusic

Reputation: 155

React.js render json response, co fetch or axios

I've been pulling my hair out too long and I can't focus anymore.

I am trying to take the json from a url and just render it visually in the browser. It doesn't even need to be formatted, at least it doesn't until I get past this hurdle.

I can get it to show up in the console via console.log, but I can't seem to get the response into the render method. I've simplified it down to the code below until I can see something on the page.

import React, { Component } from 'react';
// import axios from 'axios';

var co = require('co');
co(function *() {
var res = yield fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow');
var json = yield res.json();
console.log(res);
});

class App extends Component {

render() {
return (
  <div className="App">
    INSERT JSON HERE
  </div>
  );
 }
}

export default App;

I have also retrieved the response using

fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow')
    .then(function(res) {
        return res.json();
    }).then(function(json) {
        console.log(json);
    });

I originally started by using axios because I thought "oh man, I'm going to use axios because who's awesome? I'm awesome." 

axios.get('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow')
  .then(function(response) {
    console.log(response.data);
  });

but that was a fallacious because today I am not awesome.

I'll take whatever help I can get! My original plans also included using map to just iterate over the "items" so extra points if you can steer me closer to salvation in that area.

Upvotes: 4

Views: 12445

Answers (2)

kurumkan
kurumkan

Reputation: 2725

import React, { Component } from "react";
import axios from "axios";

const URL = "https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }
  }

  componentDidMount() {
    var _this = this;
    axios.get(URL)
    .then(function(res){
      _this.setState({
        items: res.data.items
      });
    })
    .catch(function(e) {
      console.log("ERROR ", e);
    })
  }

  render() {
    const renderItems = this.state.items.map(function(item, i) {
      return <li key={i}>{item.title}</li>
    });

    return (
      <ul className="App">
        {renderItems}
      </ul>
    );
  }
}

Upvotes: 5

Michael Lyons
Michael Lyons

Reputation: 584

You can accomplish this via React's Component State and Lifecycle.

Read about this here: React State/Lifecycle

You can place the Fetch call in the component's componentDidMount function, and have the callback set the state for viewing.

If you were to use Fetch, your component may look like this:

class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   data: false
  };
  this.receiveData = this.receiveData.bind(this);
 }
 componentDidMount() {
  var _self = this;
  fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow')
  .then(function(res) {
     return res.json();
  }).then(function(json) {
     console.log(json);
     _self.receiveData(json);
  });
 }
 receiveData(data) {
  this.setState({data});
 }
 render() {
  return <div>{this.state.data}</div>
 }
}

Upvotes: 3

Related Questions