CODEWITHSUNDEEP
javascriptjsondjangoreactjsdjango-rest-framework
NewScientists
NewScientists

Reputation: 1262

Call API from React

I am trying to get React to get the JSON from the Django Rest Framework API. The link is written like so http://127.0.0.1:8000/band/api/1/?format=json and the structure is as below:

{
id: 1,
name: "Muse",
date_added: "2017-04-17",
image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Muse_melbourne28012010.jpg",
bio: "Muse are an English rock band from Teignmouth, Devon, formed in 1994. The band consists of Matt Bellamy (lead vocals, guitar, piano, keyboards), Chris Wolstenholme (bass guitar, backing vocals, keyboards) and Dominic Howard (drums, percussion)."
}

My react is written like so:

class ItemLister extends React.Component {
    constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount(){
    fetch(`http://127.0.0.1:8000/band/api/1/?format=json`)
        .then(result=>result.json())
        .then(items=>this.setState({items}))
        setTimeout(() => console.log(this.state.items), 2000)
  }
  render() {
    return(
        <ul>
          {this.state.items.length ?
            this.state.items.map(item=><li key={item.id}>{item.name}</li>)
            : <li>Loading...</li>
          }
      </ul>
   )
  }
}

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

The HTML container div stays at loading..., the console shows no errors. I know its something to do with the JSON but cannot figure out what it is, any help appreciated!

EDIT:

After adding the below as suggest by m_callens:

setTimeout(() => console.log(this.state.items), 2000)

the console returns the object that i am indeed trying to get but it still does not render on the page.

Object {id: 1, name: "Muse", date_added: "2017-04-17", image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Muse_melbourne28012010.jpg", bio: "Muse are an English rock band from Teignmouth, Dev…eyboards) and Dominic Howard (drums, percussion)."}

Upvotes: 1

Views: 1121

Answers (1)

m_callens
m_callens

Reputation: 6360

So after the long process of logging and debugging, I think I've figured out the issue.

Your initial state is creating the items property as an array and thus you're trying to map each item to an <li> to render to your UI, however the value you're getting back from your fetch call and reassigning this.state.items to isn't an array but a simple object. Therefore when you try to map the object, it fails, also explaining why your length condition is always failing.

Instead of directly reassigning items in the second .then handling of your fetch, replace it with this version of setState to maintain the array structure.

...
  .then(newItem => this.setState((prevState, props) => ({
        items: [...prevState.items, newItem]
      })
    )
  )

You may also want to push the fetch call back in the lifecycle of the component from the componentDidMount hook to the componentWillMount hook.

Upvotes: 1

Related Questions