Parsing JSON in React Native fetch method doesnt work

Question

I'm trying to call an API with fetch from React Native App but it doesn't log the response data (console.warn('data', data)) for some reason. It prints the 'call to getArtists' log but then nothing happens.

const URL = 'https://jsonplaceholder.typicode.com/posts'

function getArtists(){
  console.log('call to getArtists')
  return fetch(URL)
    .then(response => response.json())
    .then(data => {
      console.warn('data', data)
    })
}

Code is available here: https://snack.expo.io/rkzea2Zlm at components/api-client.js

What am I doing wrong?

I noticed using URL = 'https://facebook.github.io/react-native/movies.json' makes the request works. But others doesnt — Rashomon
– Rashomon, Commented Jun 3, 2018 at 20:37
I noticed if a print responseJSON instead of data it works, but I dont understand. The real API I need (LastFM) doesnt work — Rashomon
– Rashomon, Commented Jun 3, 2018 at 21:09

Alan Oliveira de Quadros · Accepted Answer · 2018-06-04 20:11:59Z

2

First in your "api_client.js", put a return inside like the code bellow.

function getArtists(){
  console.log('call to getArtists')
  return fetch(URL)
    .then(response => response.json())
    .then(data => {
      return data
    })
}

In your App.js just do that inside componentWillMount.

componentDidMount(){
    getArtists()
      .then(data => {
        alert(JSON.stringify(data))
      });
  }

answered Jun 4, 2018 at 20:11

Alan Oliveira de Quadros

1851 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alan Oliveira de Quadros Over a year ago

You have a wrong "then" in your fetch, just do like this code. function getArtists(){ console.log('call to getArtists') return fetch(URL) .then(response => response.json()) .then(data => {return data}) }

Alan Oliveira de Quadros Over a year ago

Works after remove the last then in getArtists() method inside api_client.js. I test with alert(JSON.stringify(data)) in componentWillMount.

Rashomon Over a year ago

Thanks! Yes, seems working. But I dont understand why console.log(data) doesnt print the information but alert does it. Maybe related to snack (?)

Alan Oliveira de Quadros Over a year ago

Problably it's not working with two parameters (Ex.: console.log("teste", data)). If you insert only one parameter will work.

Collectives™ on Stack Overflow

Parsing JSON in React Native fetch method doesnt work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related