Как использовать TMDb API

Что такое API

API (интерфейс прикладного программирования) — это набор определенных правил, которые позволяют различным приложениям взаимодействовать друг с другом.

Например, вы можете отображать сообщения Instagram с помощью API Instagram.

Что такое TMDb

TMDb — это веб-API, который предоставляет базу данных для фильмов и сериалов. Вы можете использовать такие данные, как постер фильма, информацию об актерах и персонале, обзоры. Для этого требуется учетная запись, но это бесплатно.

Завести аккаунт

Создайте учетную запись на Странице регистрации.

После регистрации откройте страницу настроек из значка профиля в правой части окна.

Нажмите меню API в боковом меню, а затем вы можете отправить запрос на запрос ключа API.

После одобрения вы получите ключ API, токен доступа для чтения API. А проверить ключи можно на странице API.

Как получить данные из API

Используйте метод fetch() для получения данных из API. (Проверьте Совместимость браузера)

Вот основное использование fetch().

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

Создайте страницу отображения с помощью JavaScript

Давайте посмотрим, как отобразить список фильмов в кинотеатрах.
Источник и демо（CodeSandbox）

Создайте div для отображения данных.

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

Поместите данные в консоль с ключом API TMDb. Вы можете изменить язык и регионы с помощью language=xx и region=xx.

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

Если это удастся, вы можете увидеть данные на консоли.

Получите более подробную информацию с помощью метода map(). В этой демонстрации он отображает заголовок и постер. Используйте метод map() для data.results .

Передайте путь к заголовку и постеру createItem() (вы можете создать на следующем шаге).

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

Вот код для отображения данных.

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

Он показывает заголовки и постеры 🚀

Исходный код и демо（CodeSandbox）