Получить список видео YouTube API - PullRequest
Новая
       7

Получить список видео YouTube API

0 голосов
/ 31 октября 2018

поэтому я пытаюсь создать веб-приложение, которое при вставке поиска получает данные из API YouTube с помощью JSON и отображает список с видео, соответствующими вашему запросу. Когда он находит, он получает какое-то письмо и числовой ответ, но не список видео. Любая помощь в правильном направлении будет оценена. Вот HTML-код для этого: 

     <div class="search-box-container">
     <form action="#" class="js-search-form search-box">
      <label for="query"></label>
      <input type="text" class="js-query search-form" placeholder="Search me">
      <button type="submit" class="button">Search</button>
    </form>
  </div>

  <h2>Results</h2>

  <div class="js-search-results">

  </div>

И это JS / Jquery для него: 

  const YOUTUBE_SEARCH_URL = 
'https://www.googleapis.com/youtube/v3/search';
`const key = 'key'//(hidden for privacy concerns);`

function getDataFromApi(searchTerm, callback) {
 const query = {
  part: 'snippet',
  key: key,
  q: `${searchTerm} in:name`,
 }
  $.getJSON(YOUTUBE_SEARCH_URL, query, callback);
}

function renderResult(result) {
 return `
  <div>
   <h2>
   <a class="js-result-name" href="http//www.youtube.com/watch?v=${ 
   result.id.videoId}" target="_blank">${result.id.videoId}</a></h2>
  </div>
 `;
}

function displayYoutubeSearchData(data) {
 console.log(data);
 const results = data.items.map((item, index) => renderResult(item));
 $('.js-search-results').html(results);
}

function watchSubmit() {
 $('.js-search-form').submit(event => {
  event.preventDefault();
  const queryTarget = $(event.currentTarget).find('.js-query');
  const query = queryTarget.val();
  queryTarget.val("");
  getDataFromApi(query,displayYoutubeSearchData );
 });
}


$(watchSubmit);

Ответ получен

1 Ответ

0 голосов
/ 31 октября 2018

Вы были почти там: это просто опечатка.

Посмотрите на атрибут href внутри литерала шаблона, возвращенного методом renderResult(). 

href="http//www.youtube.com/watch?v=${result.id.videoId}"

Запомните неправильно сформированную схему (http// против https://).

Немного контекста:

API YouTube возвращает коллекцию результатов поиска (т. Е. Массив объектов, data.items в вашем коде), которые соответствуют параметрам запроса, указанным в запросе API.

Каждый элемент содержит объект id со свойством videoId. Это " буквенно-цифровой ответ ", который вы упоминаете в своем вопросе После сопоставления data.items в массиве result шаблонов HTML вы читаете этот идентификатор видео с ${result.id.videoId}. Затем вы объединяете URL-адрес YouTube с идентификатором видео.

Вы должны проверить структуру JSON результатов поиска в Документах API данных YouTube . Помимо id.videoId, он содержит больше полезной информации. Например, вы можете предпочесть показать пользователям заголовок видео, используя ${result.snippet.title} вместо буквенно-цифрового videoId.

...