Fetch API Data in React

Question

I am calling fetchData(url) to retrieve json data. My API data format is like this: PageNo:1 PageSize:100 PageCount:5 TotalRecordCount:600 Items: 0: { ID: 1, SUBJECT: ACC } 1: {…}

My react ItemList.js:

import React, {Component} from 'react';
class ItemList extends Component{
constructor(){
    super();
    this.state={
        Items:[],
        hasErrored: false,
        isLoading: false
    };
}
 //retrieve data using fetch
 fetchData(url){
    this.setState({isLoading: true});
    fetch(url)
    .then((response)=>{
        if (!response.ok){
            throw Error(response.statusText);
        }
        this.setState({isLoading:false});
        return response;
    })


    .then((response)=>{response.Items.json()})
    .then((Items)=>{
         this.setState({Items});

    })
    .catch(()=>this.setState({hasErrored:true}));
}
componentDidMount(){
    this.fetchData(myURL)
}

render(){
    if (this.state.hasErrored){
        return <p>There was an error loading the items</p>;
    }
    if (this.state.isLoading){
        return <p>Loading...</p>;
    }

    return(
        <div>  
        <ul>

            {this.state.Items.map((item)=>(
                <li key={item.ID}>{item.SUBJECT}</li>
            ))}
        </ul>
        </div>
    );
  }
  }
export default ItemList;

It always returns "There was an error loading the items". The Items array is always empty. But if I copy and paste the api url to browser, it works fine. Not sure what is wrong with my code? Thanks.

Your call enters the catch block. Start from there. Add the error parameter inside the catch(()=> like catch((error)=> and check that. Also, you can use inspect element and look at your request in Network tab. — Ionut Necula
– Ionut Necula, Commented Dec 14, 2018 at 14:46

Mosè Raguzzini · Accepted Answer · 2018-12-14 15:00:55Z

response.Items.json()

This line will throw an error as when you're accessing to the response it is yet just a string before converting it to JSON format

use

response.json()

Then, I'll change a bit @Kabbany answer as response.statusText always returns the generic error message associated with the error code. Most APIs, however, will generally return some kind of useful, more human friendly message in the body.

The key is that rather than throwing an error, you just throw the response and then process it in the catch block to extract the message in the body:

fetch(url)
      .then( response => {
        if (!response.ok) { throw response } // Return the complete error response for debugging purposes
        return response.json()  //we only get here if there is no error
      })
      .then( json => {
        this.setState({Items: json.Items }); 
      })
      .catch( error => {
        () => this.setState({ hasErrored: true, error }) // Save both error flag and error detail so you can send it to tools like bugsnag
      })

Kabbany · Accepted Answer · 2018-12-14 14:42:55Z

-1

I think it should look like this:

fetch(url)
.then((response)=>{
    if (!response.ok){
        throw Error(response.statusText);
    }
    this.setState({isLoading:false});
    return response.json();
})
.then((resp)=>{
     this.setState({Items: resp.Items});
})
.catch(()=>this.setState({hasErrored:true}));

answered Dec 14, 2018 at 14:42

Kabbany

5152 silver badges7 bronze badges

2 Comments

user788448 Over a year ago

Thanks but I tried Items: resp.Items and it doesn't work.

Kabbany Over a year ago

anyway you are missing a big part which is response.json(), if it is not there the response won't be available in json format

Collectives™ on Stack Overflow

Fetch API Data in React

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related