CODEWITHSUNDEEP
javascriptgetxmlhttprequestfetch
SD_DEV123
SD_DEV123

Reputation: 113

Giphy Search Using The Fetch Api

I'm pretty new when it comes to working with Api's. I'm trying to query the URL string and return some Gifs. 

const 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(data => showGiphs(data.images.fixed_width.url))
  .then(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}"/>

`;
  });
  document.getElementById('results').innerHTML = output;
}
<form id="gif-form">
  <input type="text" id="search">
  <input type="submit" value="find">
</form>
<div id="results"></div>

If I remove the .then(data => showGiphs(data.images.fixed_width.url)) from the fetch and just console.log the data it's returning the search results that I want. However, when I try to map to the gif"data.images.fixed_width.url, I'm getting a console error of "Uncaught (in promise) TypeError: Cannot read property 'fixed_width' of undefined" at fetch.then.then.data

Any help or push in the right direction would be awesome! Thank you! Also, if you'd like the view the demo you can view it here: https://codepen.io/Brushel/pen/jKgEXO?editors=1010

Upvotes: 0

Views: 1951

Answers (2)

Youssef BH
Youssef BH

Reputation: 582

There is couple issues with your code.

The response from the API is an object, in this object there is data array, and each element in this array is information about each gif.

Try:

const 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;
}
    <form id="gif-form">
    <input type="text" class="search">
    <input type="submit" value="find">
</form>
<div class="results"></div>

I hope this will help.

Upvotes: 1

Matt Meinzer
Matt Meinzer

Reputation: 1

The response has a data property which is an array. If you want the first GIF in that array, that would look like this: data.data[0].images.fixed_width.url. So the full line would be .then(data => showGiphs(data.data[0].images.fixed_width.url)).

Upvotes: 0

Related Questions