javascriptresponsefetch-apiimdb

API and fetching IMDB alternative movie database


I am using this API - https://rapidapi.com/rapidapi/api/movie-database-imdb-alternative I am using the JavaScript implementation and I can't see the values I am supposed to. This is not my first work with APIs, but I don't understand this behavior.

My code:

fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?i=tt4154796&r=json", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "my x-rapidapi-key (don't want to show)",
        "x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com"
    }
})
    .then(response => {
        console.log(response);
        console.log(response.url);
    })
    .catch(err => {
        console.error(err);
    });

The response I should get:

{
"Title":"Avengers: Endgame"
"Year":"2019"
"Rated":"PG-13"
"Released":"26 Apr 2019"
"Runtime":"181 min"
"Genre":"Action, Adventure, Drama, Sci-Fi"
"Director":"Anthony Russo, Joe Russo"
"Writer":"Christopher Markus (screenplay by), Stephen McFeely (screenplay by), Stan Lee (based on the Marvel comics by), Jack Kirby (based on the Marvel comics by), Joe Simon (Captain America created by), Jack Kirby (Captain America created by), Steve Englehart (Star-Lord created by), Steve Gan (Star-Lord created by), Bill Mantlo (Rocket Raccoon created by), Keith Giffen (Rocket Raccoon created by), Jim Starlin (Thanos, Gamora & Drax created by), Stan Lee (Groot created by), Larry Lieber (Groot created by), Jack Kirby (Groot created by), Steve Englehart (Mantis created by), Don Heck (Mantis created by)"
"Actors":"Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth"
"Plot":"After the devastating events of Avengers: Infinity War (2018), the universe is in ruins. With the help of remaining allies, the Avengers assemble once more in order to reverse Thanos' actions and restore balance to the universe."
"Language":"English, Japanese, Xhosa, German"
"Country":"USA"
"Awards":"Nominated for 1 Oscar. Another 69 wins & 109 nominations."
"Poster":"https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_SX300.jpg"
"Ratings":[...]3 items
"Metascore":"78"
"imdbRating":"8.4"
"imdbVotes":"856,408"
"imdbID":"tt4154796"
"Type":"movie"
"DVD":"30 Jul 2019"
"BoxOffice":"$858,373,000"
"Production":"Marvel Studios, Walt Disney Pictures"
"Website":"N/A"
"Response":"True"
}

The response I am getting:

Response {type: "cors", url: "https://movie-database-imdb-alternative.p.rapidapi.com/?i=tt4154796&r=json", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "https://movie-database-imdb-alternative.p.rapidapi.com/?i=tt4154796&r=json"
__proto__: Response

Does anybody know why my code doesn't show the proper values?

BONUS: When I do console.log(response.url); and then click on the URL in Chrome developer tools, I get the proper values., but this works only in developer tools and the URL is the same as the one I am calling. I feel like there is something wrong with the API.


Solution

  • Easy Peasy

    Use res.json() to get json data from api.

    
    fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?i=tt4154796&r=json", {
        "method": "GET",
        "headers": {
            "x-rapidapi-key": "my x-rapidapi-key (don't want to show)",
            "x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com"
        }
    })
        .then(response => {
            console.log(response.url);
            return response.json()
        })
        .then(data => {
           console.log(data)
        })
        .catch(err => {
            console.error(err);
        });