Extracting JSON data from API response in React Native

Other Questions RapidAPI
1

I’m working on a React Native app to learn more about API integration. I’m using a numbers API but I’m stuck on parsing the JSON response.

My fetch request is working fine. The status code is 200 OK. But I can’t seem to access the actual JSON data in the response body.

Here’s what I’ve tried:

getNumberInfo = () => {
  fetch('https://example-numbers-api.com/random?format=json', {
    method: 'GET',
    headers: {
      'API-Key': 'my-secret-key'
    }
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

componentDidMount() {
  this.getNumberInfo();
}

When I log the response, I see the Response object but not the JSON data I need. The API docs show the response should have fields like ‘number’, ‘fact’, and ‘type’.

How can I properly extract and use the JSON data from this API response in my React Native app? Any tips would be really helpful!

2

hey bellagarcia, looks like ur missin a step. try adding .json() to ur response like this:

.then(response => response.json())
.then(data => {
console.log(data);
// now u can access data.number, data.fact, etc
})

this should parse the JSON for ya. lmk if it works!

3

I’ve dealt with similar API issues in React Native before. One thing to note is that the Response object doesn’t automatically give you the parsed JSON data. You need to call the .json() method on the response to extract the data.

Try modifying your fetch like this:

getNumberInfo = () => {
  fetch('https://example-numbers-api.com/random?format=json', {
    method: 'GET',
    headers: {
      'API-Key': 'my-secret-key'
    }
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Now you can access data.number, data.fact, etc.
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

This should resolve your issue. Also, consider adding error handling for non-200 status codes to make your API calls more robust. Let me know if you need any further clarification!

4

It seems you’ve overlooked a crucial step in handling the API response. The fetch API returns a Promise that resolves to a Response object, which doesn’t directly contain the JSON data. To extract the JSON, you need to call the .json() method on the response.

Here’s how you can modify your code:

getNumberInfo = () => {
  fetch('https://example-numbers-api.com/random?format=json', {
    method: 'GET',
    headers: {
      'API-Key': 'my-secret-key'
    }
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
    // Now you can use data.number, data.fact, etc.
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

This approach will parse the JSON and give you access to the data you need. It also includes a check for the response status, which is a good practice for robust error handling.