Создание аркадного поискового приложения для школьного проекта. Я получаю его, чтобы отобразить информацию об API из гигантской бомбы, но не показывает информацию, которую я получаю из YouTube API. Я получаю хороший ответ от YouTube, но мой код JS не отображает его на моей странице. Что я сделал не так? На нем хорошо видна гигантская бомба, и он показывает «ты трубка» <section id="tubeResults">, но ничего под ней.
JS:
'use strict'
watchForm();
function watchForm(){
$('form').submit(event => {
event.preventDefault();
getGameInfo();
getTubeInfo();
})
}
function getGameInfo(){
var inputVal = $(".searchBox").val();
const searchUrl = `https://cors-anywhere.herokuapp.com/http://www.giantbomb.com/api/search/?api_key=[API-KEY-HERE]&format=json&query=${inputVal}&field_list=name,platforms,image,deck&resource_type=game`;
fetch(searchUrl)
.then(response => response.json())
.then(newResponse => {
console.log(newResponse);
return newResponse;
})
.then(newResponse => displayResults(newResponse, inputVal))
}
function displayResults(newResponse) {
let filteredResults = newResponse.results.filter(
item =>
item.platforms &&
item.platforms.find(platform => platform.name === "Arcade")
);
console.log(filteredResults);
$('#results-list').empty();
for(let i = 0; i < filteredResults.length; i++) {
$('#results-list').append(
`<li>
<h2>${filteredResults[i].name}</h2>
<input type="image" src="${filteredResults[i].image.thumb_url}">
<h3>${filteredResults[i].deck}</h3>
</li>`)
}
$('#results').removeClass('hidden')
}
function getTubeInfo(){
var inputVal = $(".searchBox").val();
const searchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q="${inputVal}+Arcade+Gameplay"&key=[API-KEY-HERE]`;
fetch(searchUrl)
.then(response => response.json())
.then(tubeResponse => {
console.log(tubeResponse);
return tubeResponse;
})
.then(tubeResponse => displayTube(tubeResponse, inputVal))
}
function displayTube(tubeResponse){
$('#results-list2').empty();
for(let i = 0; i < tubeResponse.length; i++) {
$('#results-list2').append(
`<li>
<h3>${tubeResponse.items[i].snippet.title}</h3>
<p>${tubeResponse.items[i].snippet.description}</p>
<img src='${tubeResponse.items[i].snippet.thumbnails.default.url}'>
</li>`)
}
$('#tubeResults').removeClass('hidden')
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Arcade Game Search Zone</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<h1>Welcome to the Arcade Game Search Zone</h1>
<p>Looking for information on a specific Arcade game? Search for one below to recieve information, videos and wiki</p>
<form>
<input class="searchBox" type="text" value="Donkey Kong">
<input class="submitButton" type="submit">
</form>
<section id="results" class="hidden info">
<h2>Search Results</h2>
<ul id="results-list">
</ul>
</section>
<section id="tubeResults" class="hidden tube">
<h2>You Tube</h2>
<ul id="results-list2">
</ul>
</section>
<script src="script.js" async defer></script>
</body>
</html>
