Поиск Гифы с помощью Fetch Api

Я довольно новый, когда дело доходит до работы с Api's. Я пытаюсь запросить строку URL и вернуть некоторые Gif.

const gifForm = document . querySelector ( "# gif-form" ); gifForm . addEventListener ( "submit" , fetchGiphs ); функция fetchGiphs ( e ) { e . preventDefault (); const searchTerm = document . querySelector ( "#search" ). ценность ; fetch (` https : //api.giphy.com/v1/gifs/search?&q = $ {searchTerm} & limit = 100 & api_key = 3mIxmBZUIIPyb8R69gtxaW8Hsh74dFKV`) . then (( response ) => { return response . json (); }) . затем ( data => showGiphs ( data . images . fixed_width . url )) . затем ( err => console . log ( err )); } function showGiphs ( fixed_width ) { const results = document . querySelector ( "#results" ); let output = '<div class = "container">' ; fixed_width . forEach (( url ) => { console . log ( url ); output + = ` < img src = " $ {data.images.original.fixed_width_url} " /> `; }); документ . getElementById ( 'results' ). innerHTML = output ; } -lang = "js" <form id = "gif-form" > <input type = "text" id = "search" > <input type = "submit" value = "find" > </ form> <div id = "results" > </ div> -hide = "false" data-console = "true" data-babel = "false"> 
.then(data => showGiphs(data.images.fixed_width.url))
console.log

Если я удалю fetch.then.then.dataиз выборки и только dataданные, она вернет результаты поиска, которые я хочу. Тем не менее, когда я пытаюсь сопоставить gif «data.images.fixed_width.url, я получаю консольную ошибку« Uncaught (в обещании) TypeError: невозможно прочитать свойство «fixed_width» undefined »atconst gifForm = document.querySelector("#gif-form"); gifForm.addEventListener("submit", fetchGiphs); function fetchGiphs(e) { e.preventDefault(); const searchTerm = document.querySelector(".search").value; fetch(`https://api.giphy.com/v1/gifs/search?&q=${searchTerm}&limit=100&api_key=3mIxmBZUIIPyb8R69gtxaW8Hsh74dFKV`) .then((response) => {return response.json(); }) .then((resp => { // Here we get the data array from the response object let dataArray = resp.data // We pass the array to showGiphs function showGiphs(dataArray); })) .catch(err => console.log(err)); // We use catch method for Error handling } function showGiphs(dataArray) { const results = document.querySelector(".results"); let output = '<div class="container">'; dataArray.forEach((imgData) => { output += ` <img src="${imgData.images.fixed_width.url}"/> `; }); document.querySelector('.results').innerHTML = output; }

Любая помощь или толчок в правильном направлении была бы потрясающей! Спасибо! Кроме того, если вы хотите просмотреть демо, вы можете просмотреть его здесь: https://codepen.io/Brushel/pen/jKgEXO?editors=1010

javascript,get,xmlhttprequest,fetch,

0

Ответов: 2

0 принят

Есть пара проблем с вашим кодом.

Ответ от API - это объект, в этом объекте есть dataмассив, и каждый элемент в этом массиве является информацией о каждом gif.

Пытаться:

    <form id="gif-form">
    <input type="text" class="search">
    <input type="submit" value="find">
</form>
<div class="results"></div>
data

Я надеюсь, это поможет.

0

Ответ имеет dataсвойство, которое является массивом. Если вы хотите , первый GIF в этом массиве, который будет выглядеть следующим образом : data.data[0].images.fixed_width.url. Таким образом, была бы полная линия .then(data => showGiphs(data.data[0].images.fixed_width.url)).

JavaScript, получить, XMLHttpRequest, принеси,
Похожие вопросы
Яндекс.Метрика