@youyom

В чем заключаются ошибки в работе с API?

Всем привет, есть код для генрации секций с помощью API key сайта pexels.com. Задача выводить секции с фото и видео, перемещение между этими пунктами происходит благодаря табам. С фотографиями все отлично работает, а вот с видео присутствуют проблемы. Ниже прикреплю скрин самой ошибки, пытаюсь понять в чем дело уже на протяжении нескольких часов, но все же не смог разобраться. Надеюсь на ответ, ведь это срочно.

61434146201f9058291267.png
6143414fa5ad3789264782.png
61434156863c5718837039.png
class VideoGallery {
		constructor() {
			this.API_KEY = '563492ad6f91700001000001711634fe765440d29c2aa7a88fb1b993';
			this.galleryDIv = document.querySelector('.video-gallery');
			this.searchForm = document.querySelector('.main-screen__item');
			this.loadMore = document.querySelector('.load-more__video');
			this.logo = document.querySelector('.main-header__logo')
			this.pageIndex = 1;
			this.searchValueGlobal = '';
			this.eventHandle();
		}
		eventHandle() {
			document.addEventListener('DOMContentLoaded', () => {
				this.getVideo(1);
			});
			this.searchForm.addEventListener('submit', (e) => {
				this.pageIndex = 1;
				this.getSearchedVideos(e);
			});
			this.loadMore.addEventListener('click', (e) => {
				this.loadMoreVideos(e);
			})
			this.logo.addEventListener('click', () => {
				this.pageIndex = 1;
				this.galleryDIv.innerHTML = '';
				this.getVideo(this.pageIndex);
			})
		}
		async getVideo(index) {
			this.loadMore.setAttribute('data-video', 'popular');
			const baseURL = `https://api.pexels.com/videos/popular?page=${index}&per_page=12`;
			const data = await this.fetchVideos(baseURL);
			this.GenerateHTML(data.video)
			console.log(data)
		}
		async fetchVideos(baseURL) {
			const response = await fetch(baseURL, {
				method: 'GET',
				headers: {
					Accept: 'application/json',
					Authorization: this.API_KEY
				}
			});
			const data = await response.json();
			// console.log(data);
			return data;
		}
		GenerateHTML(videos) {
			videos.forEach(video => {
				const item = document.createElement('div');
				item.classList.add('item-photo');
				item.classList.add('_ibg');

				item.innerHTML = `
				 <img src${video.video_pictures[0].picture}" class="image">
				 <h3>${video.user.name}</h3>
			<div class="item__menu">
				<ul class="item-photo__list item-list">
					<li class="item-list__item">
						<a download="" href="" class="item-list__link">original</a>
						<a download="" href="" class="item-list__link">large</a>
						<a download="" href="" class="item-list__link">medium</a>
						<a download="" href="" class="item-list__link">small</a>
					</li>
				</ul>
			</div>
		`;
				this.galleryDIv.appendChild(item)
			})
		}
		async getSearchedVideos(e) {
			this.loadMore.setAttribute('data-video', 'search');
			e.preventDefault();
			this.galleryDIv.innerHTML = '';
			const searchValue = e.target.querySelector('input').value;
			this.searchValueGlobal = searchValue;
			const baseURL = `https://api.pexels.com/videos/search?query=${searchValue}&page=1&per_page=12`
			const data = await this.fetchVideos(baseURL);
			this.GenerateHTML(data.video);
			e.target.reset();
		}
		async getMoreSearchedVideos(index) {
			// console.log(searchValue)
			const baseURL = `https://api.pexels.com/videos/search?query=${this.searchValueGlobal}&page=${index}&per_page=12`
			const data = await this.fetchVideos(baseURL);
			console.log(data);
			this.GenerateHTML(data.video);
		}
		loadMoreVideos(e) {
			let index = ++this.pageIndex;
			const loadMoreData = e.target.getAttribute('data-video');
			if (loadMoreData === 'popular') {
				// load next page for curated]
				this.getVideo(index);
			} else {
				// load next page for search
				this.getMoreSearchedVideos(index);
			}
		}
	}
	const gallery__videos = new VideoGallery;
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
запрос возвращает массив/объект? если нет, то ошибка в запросе - кури мануал апи, пиши тех.поддержке сервиса.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы