Fetching image url from jquery ajax call

Question

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 + ">"); } }); });

Try this $('.gif-container').append("<img src='" + response.data[i].images.fixed_height +"'>"); } — Jino Shaji
– Jino Shaji, Commented Sep 12, 2017 at 14:05
According to the API docs, fixed_height is an object, so I'm not sure exactly what you're trying to append — Rory McCrossan
– Rory McCrossan, Commented Sep 12, 2017 at 14:07

Niladri · Accepted Answer · 2017-09-12 14:13:16Z

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 + ">"); } }); });

Collectives™ on Stack Overflow

Fetching image url from jquery ajax call

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related