CODEWITHSUNDEEP
javascriptreactjsreact-nativefetchredux
nburk
nburk

Reputation: 22731

`fetch` in React Native doesn't return expected data from URL

I want to use the fetch() API to load data from a URL in a React Native Application. Specifically, I want to load all items from the Hackernews Jobs page.

As stated in their API doc, the corresponding call has to go out to URL: https://hacker-news.firebaseio.com/v0/jobstories.json

When navigating to this URL in the browser, I receive a simple javascript array of IDs as expected:

[11379939,11379294,11378554,11377293,11375582,11373919,11372195,11371135,11369985,11369460,11361426,11357881,11356669,11354578,11351786,11350273,11349328,11347911,11346192,11343590,11342818,11342137,11341262,11340129]

However, when I want to load the data in my React Native app using the following method, I don't receive the same javascript array I get when sending the request through the browser.

export const fetchJobs = () => {
  return (dispatch) => {
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    })
    .then( (response) => {
      console.log('Actions - fetchJobs - received response: ', response)
      const json = JSON.parse(response)
    })
    .then( (jobs) => {
      console.log('Actions - fetchJobs - received jobs: ', jobs)
      dispatch(receiveJobs(jobs))
    })
    .catch( (error) => {
      console.warn('Actions - fetchJobs - recreived error: ', error)
    })
  }
}

I am calling fetchJobs() using dispatch from Redux in my initial React component like so:

componentDidMount() {
   var fetchJobsAction = fetchJobs()
   console.log('JobsRootComponent - fetch jobs: ' + fetchJobsAction)
   const { dispatch } = this.props
   dispatch( fetchJobs() )
}

However, when inspecting the output in the Chrome debugging console, the output looks like this:

enter image description here

Can someone tell me why the content of the response differs between the requests I am sending from the browser and the one from my React Native app?

Update: As requested in the comments, I now printed response.json() as well, giving me the following result: enter image description here

So indeed, the array data now seems to be there. But I still don't understand how I can access it from where I am at the moment...

Upvotes: 3

Views: 7343

Answers (2)

purii
purii

Reputation: 6414

Use return inside then

You have to return the result of response.json(), if you are chaining then calls.

export const fetchJobs = () => {
  return (dispatch) => {
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    })
    .then( (response) => {
      console.log('Actions - fetchJobs - received response: ', response)
      return response.json();
    })
    .then( (jobs) => {
      console.log('Actions - fetchJobs - received jobs: ', jobs)
      dispatch(receiveJobs(jobs))
    })
    .catch( (error) => {
      console.warn('Actions - fetchJobs - recreived error: ', error)
    })
  }
}

Upvotes: 4

cornedor
cornedor

Reputation: 51

The response of a fetch has it's own JSON parse function, just call response.json() which will return a new Promise.

fetch('https://hacker-news.firebaseio.com/v0/jobstories.json')
  .then(reponse => response.json())
  .then(json => console.log(json))

Upvotes: 5

Related Questions