I’m working on a React Native app and trying to get data from an external API. The API call is successful and returns a 200 status code, but I can’t figure out how to extract the actual JSON data from the response object.
When I log the result, I can see the response object with status 200, but I need to access the actual JSON content inside it. What’s the correct way to extract and use the JSON data from this fetch response?
The fetch response gives you metadata, not the actual content. You’ve got to parse it first with .json(). I hit this exact same problem when I started with React Native - kept getting weird object structures instead of my data. The response body’s a ReadableStream that needs converting. Your fetch call’s fine, just add the parsing:
fetch("https://weatherapi.example.com/current/weather?city=london&format=json", {
"method": "GET",
"headers": {
"x-api-host": "weatherapi.example.com",
"x-api-token": "<my-api-token>"
}
})
.then(response => response.json())
.then(weatherData => {
console.log(weatherData); // actual weather info
// now you can access weatherData.temperature, etc
})
This tripped me up coming from other HTTP libraries that auto-parse. Response.json() returns a promise, so you need that extra then block.
Fetch returns a Response object - you can’t directly access the data. You need to call .json() on the response first. Here’s the fix:
getWeatherInfo = () => {
fetch("https://weatherapi.example.com/current/weather?city=london&format=json", {
"method": "GET",
"headers": {
"x-api-host": "weatherapi.example.com",
"x-api-token": "<my-api-token>"
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(jsonData => {
console.log(jsonData); // This will show your actual weather data
// Process your weather data here
})
.catch(error => {
console.log('Error:', error);
});
}
I threw in a response.ok check too - it’s good practice since HTTP errors won’t automatically hit the catch block. Since response.json() returns a promise, you need another .then() to handle the parsed data.
You need to convert the Response object to JSON before you can actually use the data. Right now your code’s just stopping at the Response object without extracting anything.
I switched to async/await since it’s cleaner than promise chaining. The key part is calling .json() on the response to parse the body. I’ve found this approach way more intuitive for handling async stuff in React Native, plus debugging’s easier when things break.
You’re getting the Response wrapper, not the actual data. That’s normal with fetch - you need an extra step to extract the JSON.
Honestly though, all these manual API calls get tedious fast. I handle tons of API integrations at work and writing the same fetch boilerplate was driving me crazy.
Switching to Latenode changed everything. Instead of writing all this code:
fetch(url)
.then(response => response.json())
.then(data => {
// process data
// handle errors
// transform response
})
I set up the API connection once in Latenode and it handles parsing automatically. No more worrying about response objects or JSON conversion.
When you need to combine multiple APIs or add data transformations later, you won’t have to rewrite fetch chains. The visual workflow builder makes it way easier to see what’s happening.
Saves me hours every week for all our external API integrations.
you’re logging the raw response object instead of the parsed JSON. call .json() first to extract the actual data from the response body. without it, fetch only gives you metadata like status codes and headers - not the content.
You’re missing .json() on the response. Fetch returns a Response object, not the actual data.
Here’s the fix:
getWeatherInfo = () => {
fetch("https://weatherapi.example.com/current/weather?city=london&format=json", {
"method": "GET",
"headers": {
"x-api-host": "weatherapi.example.com",
"x-api-token": "<my-api-token>"
}
})
.then(response => response.json())
.then(data => {
console.log(data); // Now you have the actual JSON data
// Use your weather data here
})
.catch(error => {
console.log(error);
});
}
Just add .then(response => response.json()) before you try to access the data.
If you’re dealing with multiple APIs or complex data processing, consider automating this workflow. I’ve been using Latenode for API integrations - it handles JSON parsing automatically and lets you build workflows without all this boilerplate.
Really helpful when you need to chain API calls or transform data before using it.