CODEWITHSUNDEEP
jqueryajax
cerrach
cerrach

Reputation: 197

Fetching image url from jquery ajax call

Trying to give a src attribute to a created element. The src should be a url retrieved from the giphy api. I can console.log the response data and everything is fine, however I cannot seem to get the jQuery for creating an element to house the gif correct.

$('.spawn-button').on("click", function(event) {
  event.preventDefault();

  $.ajax({
    url: query + $(this).html() + APIKey + limit,
    method: 'GET'
  }).done(function(response) { 
    for(var i = 0; i < response.data.length; i++){
      // console.log(response.data[i]);
      // console.log(response.data[i].images.original);
      $('.gif-container').append("<img src=" + response.data[i].images.fixed_height + ">");
    }
  });
});

Upvotes: 0

Views: 1075

Answers (1)

Niladri
Niladri

Reputation: 5962

Can you try with the below code . as per the documentation at https://developers.giphy.com/docs/ fixed_height object has the url property for the GIF image 

$('.spawn-button').on("click", function(event) {
  event.preventDefault();

  $.ajax({
    url: query + $(this).html() + APIKey + limit,
    method: 'GET',
    success: function(response) { 
    for(var i = 0; i < response.data.length; i++){
      // console.log(response.data[i]);
      // console.log(response.data[i].images.original);
      $('.gif-container').append("<img src=" + response.data[i].images.fixed_height.url + ">");
    }
  });
});

Upvotes: 1

Related Questions