Reading RapidAPI JSON response using fetch method

Issue

I am developing a react-native project for learning purposes. I am using RapidAPI (https://rapidapi.com/divad12/api/numbers-1/endpoints) for the same.

When I hit the API I get the status as 200OK, But I am unable to read the response data in JSON format from the API.

Code:

fetchCurrencyData = () => {
    fetch("https://numbersapi.p.rapidapi.com/7/21/date?fragment=true&json=true", {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "numbersapi.p.rapidapi.com",
            "x-rapidapi-key": "<Valid API Key, generated in code snippet>"
        }
    })
    .then(response => {         
        console.log(response);
    })
    .catch(err => {
        console.log(err);
    }); 
}

componentDidMount(){
    this.fetchCurrencyData();
}

In console.log(response); I get:

I checked the response in RapidAPI -> MyApps section:

How can I read the response body in JSON format?

Solution

Currently you are printing the response object, which contains the raw response including headers, etc. You can do the following:

fetchCurrencyData = () => {
    fetch("https://numbersapi.p.rapidapi.com/7/21/date?fragment=true&json=true", {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "numbersapi.p.rapidapi.com",
            "x-rapidapi-key": "<Valid API Key, generated in code snippet>"
        }
    })
    .then(response => response.json()) // Getting the actual response data
    .then(data => {         
        console.log(data);
    })
    .catch(err => {
        console.log(err);
    }); 
}

componentDidMount(){
    this.fetchCurrencyData();
}

Answered By - Andrey Bukati