Reading RapidAPI JSON response using fetch method

Question

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?

Answer 1

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();
}

Answer 2

I had the same issue. When embedding spoonacular API from RapidApi. Then I used this:

    <?php
    $headers = array('Accept' => 'application/json');
    $response = Unirest\Request::get("https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/search?number=50&query='.$plus_separated.'",
      array(
        "X-RapidAPI-Key" => "bc038c4c88mshae2640d....e1acp1301aejsnd5703df78862"
      )
    );
        $array_1 = $response->raw_body;         
    }
    ?>

    <div id="result_body" class="container">
           <P id="allert_msg" class="text-center">Results Not Found</P>
    </div>

    <script>
            var array_2 = '<?php echo  $array_1;?>';
            var array_3 = JSON.parse(array_2);
            var main_array = array_3.results;
            var main_array_length = main_array.length;
            var i=j=k=l=m=0;

            for(i=0; i < main_array_length; i++){
            var result_body= document.getElementById("result_body");
            var body_link = document.createElement("a");
            body_link.setAttribute("class", "single_link");
            body_link.setAttribute("target", "_blank");
            body_link.setAttribute("href", 'recipe_details.php?id='+main_array[i].id+'&submit_id=OK');
            result_body.appendChild(body_link);

            var p = document.createElement("div");
            p.setAttribute("id", "single_item_"+j++);
            p.setAttribute("class", "single_item");
            body_link.appendChild(p);
    </script>

It was for recipe search purpose. The code automatically creates div, a, p,... etc HTML DOM element and will show the search result. You should put the right values into the right position, which comes from the response, in json format. In the above I've put the response in "$array_1" in PHP then in "array_2" in Javascript. And then continued the next process with Javascript. If you got some error in my code, and got a better idea, please let me khow. Thank you!