CODEWITHSUNDEEP
javascriptjsonreactjs
wuno
wuno

Reputation: 9875

Iterating through data with Axios in React JS

Background

I am making a API call with Axios in a React.js application. The response is returned but I am having a problem iterating the data in the render function.

Json Response 

{
  "response": {
    "items": [
      {
        "episode_id": 8528077,
        "type": "RECORDED",
        "title": "REPLICON RADIO 5-16",
        "duration": 12741360,
        "explicit": true,
        "show_id": 1443546,
        "author_id": 6168026,
        "site_url": "https://www.spreaker.com/episode/8528077",
        "image_url": "https://d1bm3dmew779uf.cloudfront.net/large/8f84530817540e259a824dea66fcf745.jpg",
        "image_original_url": "https://d3wo5wojvuv7l.cloudfront.net/images.spreaker.com/original/8f84530817540e259a824dea66fcf745.jpg",
        "published_at": "2016-05-16 23:00:05",
        "download_enabled": true,
        "waveform_url": "https://d3770qakewhkht.cloudfront.net/episode_8528077.gz.json"
      }
    ],
    "next_url": "https://api.spreaker.com/v2/shows/1443546/episodes?filter=listenable&last_id=8528077&limit=1"
  }
}

Axios Get Method

axios.get(`https://api.spreaker.com/v2/shows/1443546/episodes?filter=listenable&last_id=8589057&limit=1`)
    .then(res => {
        const episodes = res.data.response.items.map(r => r.data);
        this.setState({episodes});
    })

Render Function

<ul>
 {this.state.episodes.map(episode =>
 <li key={episode.episode_id}>{episode.title}</li>
 )}
</ul>

Question

From the documentation I believe I am doing this right, but I keep getting the error episode_id does not exist. Based on my json what am I doing wrong to render the data to the view?

Upvotes: 0

Views: 5944

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281686

What you need to do in your axios is simply return the array of items and then in your code map over them to render it

axios.get(`https://api.spreaker.com/v2/shows/1443546/episodes?filter=listenable&last_id=8589057&limit=1`)
    .then(res => {
        const episodes = res.data.response.items;
        this.setState({episodes});
    })

When you are using map to return values to save into state, there is no such value as r.data and that is pretty unnecessary.

and render like

<ul>
 {this.state.episodes.map(episode =>
 <li key={episode.episode_id}>{episode.title}</li>
 )}
</ul>

Upvotes: 2

jony89
jony89

Reputation: 5367

According to the object structure all you need to do is :

const episodes = res.data.response.items;
this.setState({episodes});

or just :

this.setState({episodes: res.data.response && res.data.response.items});

There is no data property on each item... (r.data)

Upvotes: 1

Related Questions