
## What is API

API（Application Programming Interface） is a set of defined rules that enable different applications to communicate with each other.

For example, you can display Instagram posts with Instagram API.

## What is TMDb

[TMDb](https://www.themoviedb.org/) is Web API that provides data base for movies and TV series. You can use the data like movie poster, cast and staff informations, reviews. It requires an account but it’s free.

## Create an account

Create an account on [Sign up page](https://www.themoviedb.org/signup) .

![](./tmdb-api_01.png)

After registered, open the Settings page from profile icon on the right of window.

![](./tmdb-api_02.png)

Click the [API](https://www.themoviedb.org/settings/api) menu on side menu, and then you can send request for Request an API Key.

![](./tmdb-api_03.png)

After approved, you will get API Key, API Read Access Token. And you can check keys on [API](https://www.themoviedb.org/settings/api) page.

## How to get data from API

Use `fetch()` method to get data from API. (Check the [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#browser_compatibility) )

Here’s the basic `fetch()` usage.

```jsx
fetch("http://sample.com/sample.json")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log("error");
  });
```

## Create a display page with JavaScript

Let’s see how to display [a list of movies in theatres](https://developers.themoviedb.org/3/movies/get-now-playing).  
[Source & Demo（CodeSandbox）](https://codesandbox.io/s/tmdb-api-sample-6gnt0u)

Create `div` to display data.

```html
<div id="app"></div>
```

Put data to console with TMDb API Key. You can change the language and regions with `language=xx` and `region=xx` .

```jsx
fetch(
  "https://api.themoviedb.org/3/movie/now_playing?api_key=<ここにAPI Key入れる>&language=en-US&region=US&page=1"
)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log("error");
  });
```

If it succeed, you can see data on console.

![](./tmdb-api_04.png)

Get more details with `map()` method. In this demo, it displays title and poster. Use `map()` method to `data.results` .

Pass the title and poster path to `createItem()` (you can create on the next step).

```jsx
data.results.map((movie) => {
  createItem(movie.title, movie.poster_path);
});
```

Here’s the code for display data.

```jsx
const container = document.getElementById("app");

const createItem = (titleName, imgPath) => {
  const row = document.createElement("div");
  row.setAttribute("class", "item");

  const title = document.createElement("p");
  title.setAttribute("class", "title");
  title.textContent = titleName;

  const poster = document.createElement("img");
  poster.src = `https://image.tmdb.org/t/p/w300_and_h450_bestv2/${imgPath}`;

  container.appendChild(row);
  row.appendChild(poster);
  row.appendChild(title);
};
```

It shows titles and posters 🚀

![](./tmdb-api_05.png)

[Source & Demo（CodeSandbox）](https://codesandbox.io/s/tmdb-api-sample-6gnt0u)

## References

- [Tania Rascia「How to Use the JavaScript Fetch API to Get JSON Data」](https://www.taniarascia.com/how-to-use-the-javascript-fetch-api-to-get-json-data/)（参照2019-08-23
- [Tania Rascia「How to Connect to an API with JavaScript」](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/)（参照2019-08-23）
- [クロジ「映画ブログ作りました」, <[https://nanokamo.com/kinematos>](https://nanokamo.com/kinematos)（参照2017-09-30）](<https://nanokamo.com/kinematos>%5D(https://nanokamo.com/kinematos)%EF%BC%88%E5%8F%82%E7%85%A72017-09-30%EF%BC%89>)


How to Use the TMDb API

Tags