Я новый разработчик, которому нужна помощь кого-то с большим опытом.Я пытаюсь понять, как использовать API / конечную точку. Я создал ключ, и теперь я пытаюсь заставить свое приложение искать парки в одном или нескольких штатах, а также отображать полное имя, описание.Вот документация API.Я надеюсь, что задал вопрос достаточно хорошо, я открыт для конструктивной критики.
API (пожалуйста, скопируйте и вставьте ссылку в новую вкладку) https://www.nps.gov/subjects/developer/api-documentation.htm#/parks/getPark
'use strict';
// put your own value below!
const apiKey = '';
const searchURL = 'https://developer.nps.gov/api/v1/parks?parkCode=acad&';
function formatQueryParams(params) {
const queryItems = Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
return queryItems.join('&');
}
function displayResults(responseJson) {
// if there are previous results, remove them
console.log(responseJson);
$('#results-list').empty();
// iterate through the items array
for (let i = 0; i < responseJson.items.length; i++){
// for each video object in the items
//array, add a list item to the results
//list with the video title, description,
//and thumbnail
$('#results-list').append(
`<li><h3>${responseJson.items[i].snippet.title}</h3>
<p>${responseJson.items[i].snippet.description}</p>
<img src='${responseJson.items[i].snippet.thumbnails.default.url}'>
</li>`
)};
//display the results section
$('#results').removeClass('hidden');
};
function getYouTubeVideos(query, maxResults=10) {
const params = {
key: apiKey,
q: query,
part: 'snippet',
maxResults,
type: 'video'
};
const queryString = formatQueryParams(params)
const url = searchURL + '?' + queryString;
console.log(url);
fetch(url)
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error(response.statusText);
})
.then(responseJson => displayResults(responseJson))
.catch(err => {
$('#js-error-message').text(`Something went wrong: ${err.message}`);
});
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
const maxResults = $('#js-max-results').val();
getYouTubeVideos(searchTerm, maxResults);
});
}
$(watchForm);
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button, input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.error-message {
color: red;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>YouTube video finder</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Park finder</h1>
<form id="js-form">
<label for="search-term">Search term</label>
<input type="text" name="search-term" id="js-search-term" required>
<label for="max-results">Maximum results to return</label>
<input type="number" name="max-results" id="js-max-results" value="10">
<input type="submit" value="Go!">
</form>
<p id="js-error-message" class="error-message"></p>
<section id="results" class="hidden">
<h2>Search results</h2>
<ul id="results-list">
</ul>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
'use strict';
// put your own value below!
const apiKey = 'XDkrghHigMG7xYtlfMloyKAoJ04H4te9h3UKWW3g';
const searchURL = 'https://developer.nps.gov/api/v1/parks?parkCode=acad&api_key=XDkrghHigMG7xYtlfMloyKAoJ04H4te9h3UKWW3g';
function formatQueryParams(params) {
const queryItems = Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
return queryItems.join('&');
}
function displayResults(responseJson) {
// if there are previous results, remove them
console.log(responseJson);
$('#results-list').empty();
// iterate through the items array
for (let i = 0; i < responseJson.items.length; i++){
// for each video object in the items
//array, add a list item to the results
//list with the video title, description,
//and thumbnail
$('#results-list').append(
`<li><h3>${responseJson.items[i].snippet.title}</h3>
<p>${responseJson.items[i].snippet.description}</p>
<img src='${responseJson.items[i].snippet.thumbnails.default.url}'>
</li>`
)};
//display the results section
$('#results').removeClass('hidden');
};
function getYouTubeVideos(query, maxResults=10) {
const params = {
key: apiKey,
q: query,
part: 'snippet',
maxResults,
type: 'video'
};
const queryString = formatQueryParams(params)
const url = searchURL + '?' + queryString;
console.log(url);
fetch(url)
.then(response => {
(responseJson => displayResults(responseJson))
if (response.ok) {
return response.json();
console.log(response.json());
}
throw new Error(response.statusText);
})
.catch(err => {
$('#js-error-message').text(`Something went wrong: ${err.message}`);
});
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
const maxResults = $('#js-max-results').val();
getYouTubeVideos(searchTerm, maxResults);
});
}
$(watchForm);