Вывод информации с API в HTML

Question

Задачка с *

Есть HTML страничка с дивами фильмов У меня есть готовая страница JSON в которой с БД MySql через NodeJs[Express] вытаскиваются данные

Там есть все фильмы,мне нужно вытащить оттуда все поля и отобразить в HTML на чистом JS без PHP и без фреймворков https://multiflex-api.herokuapp.com/api/films

{
"film_id": 1,
"poster_url": "https://i.pinimg.com/736x/0c/43/5c/0c435cab58ae6becdcbd81ad05787d26.jpg",
"tittle_name": "Spider-Man",
"genre_name": "Adventure",
"release_date": 2019,
"film_review": 5,
"trailer_url": "https://www.youtube.com/watch?v=tg52up16eq0"
}

Код HTML :

<div class="container">

  <div class="movie-card">
    <img class="movie-header manOfSteel" src="https://i.pinimg.com/736x/0c/43/5c/0c435cab58ae6becdcbd81ad05787d26.jpg">
    </img>

    <div class="movie-content">
      <div class="movie-content-header">
        <a href="#">
          <h3 class="movie-title" id="movie-tittle">Man of Steel</h3>
        </a>
      </div>

      <div class="movie-info">
        <div class="info-section">
          <label>147 MIN | ADVENTURE</label>
          <img class="star" src="img/star.png">
          <span>9.8</span>
        </div>
        <!--date,time-->

        <div class="info-section">
          <label>Release</label>
          <span id="date-release">2019</span>
        </div>
        <!--seat-->

      </div>
    </div>
    <!--movie-content-->

Answer 1

Можно так:

function getCardMarkup (card) {
return `<div class="movie-card">
    <img class="movie-header manOfSteel" src="${card.poster_url}">
    </img>

    <div class="movie-content">
      <div class="movie-content-header">
        <a href="${card.trailer_url}">
          <h3 class="movie-title" id="movie-tittle">${card.tittle_name}</h3>
        </a>
      </div>

      <div class="movie-info">
        <div class="info-section">
          <label>147 MIN | ${card.genre_name}</label>
          <img class="star" src="img/star.png">
          <span>${card.film_review}</span>
        </div>
        <!--date,time-->

        <div class="info-section">
          <label>Release</label>
          <span id="date-release">${card.release_date}</span>
        </div>
        <!--seat-->

      </div>
    </div>
    `;
}

Тут ты получишь разметку для одной карточки let cards = [ ... ]; //тут массив с даными карточек

Получаем всю разметку для карточек:

function getAllCardsMarkup (cards, getMarkup) {
   let markup = '';
   cards.forEach((card) => {
      markup += getMarkup(card);
   });
   return markup;
}

Потом пилим функцию для добавления всех карточек в контейнер:

function addCardsToContainer (containerEl, markup) {
   let container = document.querySelector(containerEl);
   containner.innerHTML = markup;
}

Ну и тут вызываем:

addCardsToContainer ('.container', getAllCardsMarkup(cards, getCardMarkup ));

Answer 2

Допустим так.

JSFIDDLE (sass)

Скрипт с использованием api `themoviedb`

class Movies {
	
	constructor() {
		// Контейнер, в который будут помещаться нвоые элементы
		this.container = document.querySelector('.container .movies');
		
		// Блок, шаблон, макет, который будет в дальнейшем редактироваться
		this.card = document.querySelector('.movies .movie-card');
		
		// Объект всех используемых ссылок
		this.url = {
			api: 'https://api.themoviedb.org/3/discover/movie?api_key=15d2ea6d0dc1d476efbca3eba2b9bbfb',
			image: 'https://image.tmdb.org/t/p/w400',
			link: 'https://www.themoviedb.org/movie/'
		}
		
		this.posters = [];
		
		// Удаляем блок
		this.card.remove();
		
		// Загружаем фильмы
		this.loadPosters();
	}
	
	/**
	 * Загрузка фильмов
	 */
	async loadPosters() {
		let response = {};
		try {
			response =  await axios.get(this.url.api);
		} catch (error) {
			return console.error(`AXIOS - ${error.message}`);
		}
		
		if (!'results' in response.data)
			return console.error('Posters not found');
		
		this.posters = response.data.results;
		this.sortPosters();
		this.setPosters();
	}
	
	/**
	 * Сортируем фильмы по популярности от большего к меньшему
	 */
	sortPosters() {
		this.posters = this.posters.sort((x, y) => y.popularity - x.popularity);
	}
	
	setPosters() {
		/**
		 * Перебор всех фильмов
		 */
		this.posters.forEach((poster) => {
			/**
			 * Клонируем структуру
			 */
			const cloneCard = this.card.cloneNode(true);
			
			/**
			 * Устанавливаем изображение
			 */
			const image = cloneCard.querySelector('img');
			image.src = this.url.image + poster.poster_path;
			
			/**
			 * Устанавливаем ссылку
			 */
			const link = cloneCard.querySelector('a');
			link.href = this.url.link + poster.id;
			
			/**
			 * Устанавливаем название
			 */
			const name = cloneCard.querySelector('h3');
			name.innerHTML = poster.title;
			
			/**
			 * Устанавливаем описание
			 */
			const info = cloneCard.querySelector('.info p');
			info.innerHTML = poster.overview;
			// заголовок который при наведении покажет всю информацию
			info.title = poster.overview;
			
			/**
			 * Устанавливаем рейтинг
			 */
			const rating = cloneCard.querySelector('.footer p span');
			rating.innerHTML = poster.vote_average;
			
			/**
			 * Устанавливаем дату
			 */
			const date = cloneCard.querySelector('.footer > span');
			date.innerHTML = poster.release_date;
			
			/**
			 * Добавляем блок в контейнер
			 */
			this.container.appendChild(cloneCard);
		});
	}
}
new Movies();

@import url("https://fonts.googleapis.com/css?family=Palanquin+Dark:400,500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
}

body {
  background-color: #0e1619;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
}

.container {
  padding: 25px 35px;
}
.container h1 {
  font-family: "Palanquin Dark", sans-serif;
  font-size: 45px;
  color: #fff;
  margin-bottom: 65px;
}
.container .movies {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 40px;
}
.container .movie-card {
  display: flex;
  flex-direction: column;
  width: 268px;
}
.container .movie-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 24px;
}
.container .movie-card h3 {
  color: #1c70ec;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.container .movie-card .info {
  color: #9da3a1;
  font-size: 9px;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: 500;
  margin: auto 0 0;
}
.container .movie-card .info p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container .movie-card .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 10px;
  color: #fff;
  margin: 15px 0 0;
}
.container .movie-card .footer svg {
  width: 20px;
  height: 20px;
  fill: #fd0841;
  margin-right: 5px;
}
.container .movie-card .footer p {
  display: flex;
}
.container .movie-card .footer p span {
  margin-top: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div class="container">
	<h1>Popular Films</h1>
	<div class="movies">
		<div class="movie-card">
			<img src="">
			<a href="#" target="_blank">
				<h3 class="movie-title">name</h3>
			</a>
			<div class="info">
				<p>overview</p>
			</div>
			<div class="footer">
				<p>
					<svg viewBox="0 0 511.998 511.998" xmlns="http://www.w3.org/2000/svg"><path d="m414.168 500.62-158.169-83.155-158.169 83.155 30.207-176.121-128.037-124.735 176.86-25.689 79.139-162.697 79.139 162.697 176.86 25.689-128.037 124.734z"/></svg>
					<span>rating</span>
				</p>
				<span>date</span>
			</div>
		</div>
	</div>
</div>

Скрипт с использованием api `multiflex`

class Movies {
	
	constructor() {
		// Контейнер, в который будут помещаться нвоые элементы
		this.container = document.querySelector('.container .movies');
		
		// Блок, шаблон, макет, который будет в дальнейшем редактироваться
		this.card = document.querySelector('.movies .movie-card');
		
		// Объект всех используемых ссылок
		this.url = {
			api: 'https://multiflex-api.herokuapp.com/api/films',
			image: 'https://image.tmdb.org/t/p/w400',
			link: 'https://www.themoviedb.org/movie/'
		}
		
		this.posters = [];
		
		// Удаляем блок
		this.card.remove();
		
		// Загружаем фильмы
		this.loadPosters();
	}
	
	/**
	 * Загрузка фильмов
	 */
	async loadPosters() {
		let response = {};
		try {
			response =  await axios.get(this.url.api);
		} catch (error) {
			return console.error(`AXIOS - ${error.message}`);
		}
		
		if (! response.data)
			return console.error('Posters not found');
		
		this.posters = response.data;
		this.sortPosters();
		this.setPosters();
	}
	
	/**
	 * Сортируем фильмы по популярности от большего к меньшему
	 */
	sortPosters() {
		this.posters = this.posters.sort((x, y) => y.popularity - x.popularity);
	}
	
	setPosters() {
		/**
		 * Перебор всех фильмов
		 */
		this.posters.forEach((poster) => {
			/**
			 * Клонируем структуру
			 */
			const cloneCard = this.card.cloneNode(true);
			
			/**
			 * Устанавливаем изображение
			 */
			const image = cloneCard.querySelector('img');
			image.src = this.url.image + poster.poster_path;
			
			/**
			 * Устанавливаем ссылку
			 */
			const link = cloneCard.querySelector('a');
			link.href = this.url.link + poster.id;
			
			/**
			 * Устанавливаем название
			 */
			const name = cloneCard.querySelector('h3');
			name.innerHTML = poster.title;
			
			/**
			 * Устанавливаем описание
			 */
			const info = cloneCard.querySelector('.info p');
			info.innerHTML = poster.overview;
			// заголовок который при наведении покажет всю информацию
			info.title = poster.overview;
			
			/**
			 * Устанавливаем рейтинг
			 */
			const rating = cloneCard.querySelector('.footer p span');
			rating.innerHTML = poster.vote_average;
			
			/**
			 * Устанавливаем дату
			 */
			const date = cloneCard.querySelector('.footer > span');
			date.innerHTML = new Date(poster.release_date).getFullYear();
			
			/**
			 * Добавляем блок в контейнер
			 */
			this.container.appendChild(cloneCard);
		});
	}
}
new Movies();

@import url("https://fonts.googleapis.com/css?family=Palanquin+Dark:400,500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
}

body {
  background-color: #0e1619;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
}

.container {
  padding: 25px 35px;
}
.container h1 {
  font-family: "Palanquin Dark", sans-serif;
  font-size: 45px;
  color: #fff;
  margin-bottom: 65px;
}
.container .movies {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 40px;
}
.container .movie-card {
  display: flex;
  flex-direction: column;
  width: 268px;
}
.container .movie-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 24px;
}
.container .movie-card h3 {
  color: #1c70ec;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.container .movie-card .info {
  color: #9da3a1;
  font-size: 9px;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: 500;
  margin: auto 0 0;
}
.container .movie-card .info p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container .movie-card .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 10px;
  color: #fff;
  margin: 15px 0 0;
}
.container .movie-card .footer svg {
  width: 20px;
  height: 20px;
  fill: #fd0841;
  margin-right: 5px;
}
.container .movie-card .footer p {
  display: flex;
}
.container .movie-card .footer p span {
  margin-top: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div class="container">
	<h1>Popular Films</h1>
	<div class="movies">
		<div class="movie-card">
			<img src="">
			<a href="#" target="_blank">
				<h3 class="movie-title">name</h3>
			</a>
			<div class="info">
				<p>overview</p>
			</div>
			<div class="footer">
				<p>
					<svg viewBox="0 0 511.998 511.998" xmlns="http://www.w3.org/2000/svg"><path d="m414.168 500.62-158.169-83.155-158.169 83.155 30.207-176.121-128.037-124.735 176.86-25.689 79.139-162.697 79.139 162.697 176.86 25.689-128.037 124.734z"/></svg>
					<span>rating</span>
				</p>
				<span>date</span>
			</div>
		</div>
	</div>
</div>

БЛОГ НА HUSL

Вывод информации с API в HTML

Задачка с *

Ответы (2 шт):

Скрипт с использованием api `themoviedb`

Скрипт с использованием api `multiflex`

БЛОГ НА HUSL

Вывод информации с API в HTML

Задачка с *

Ответы (2 шт):

Скрипт с использованием api themoviedb

Скрипт с использованием api multiflex

Скрипт с использованием api `themoviedb`

Скрипт с использованием api `multiflex`