CODEWITHSUNDEEP
javascriptjqueryjsonajaxapi
hc0re
hc0re

Reputation: 1986

Putting image on a html page from API response?

I am very new to web development, ajax etc. I have access to Tenor api, so I can send a request like this: 

https://api.tenor.com/v1/random?q=MYQUERYSTRING&key=MYAPIKEY&limit=1

It responds with an JSON document, which looks like this (I am pasting just the important stuff):

{
  "results": [
    {
      "tags": [], 
      "url": "https://tenor.com/0liG.gif", 
      "media": [ some other JSON data down there ]
    }]
}

Now I need to access that url parameter. After a bit of googling I have found a partial solution:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <title>Sample Page</title>
      <script>
         var settings = {
           "async": true,
           "crossDomain": true,
           "url": "https://api.tenor.com/v1/random?q=MYQUERY&key=MYAPIKEY&limit=1",
           "method": "GET"
         }

         $.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.results.url;
           $("#myUrl").append(content);
         });
      </script>
   </head>
   <body>
      <h1>Sample Page</h1>
      <div id="someid">URL: 
          <img id="myUrl" src="" />
      </div>
   </body>
</html>

But the image is not displayed.

I have opened the console, and I am absolutely sure that the response is full of data and contains the URL to the image I need.

How can I display this image?

Upvotes: 0

Views: 4907

Answers (4)

Yohanis Gobai
Yohanis Gobai

Reputation: 66

I can see 2 mistakes on your code based on response object that you gave.

First:

$.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.results.url;
           $("#myUrl").append(content);
         });
the

var content = response.results.url;

should be

var content = response.results[0].url;

Second:

the $("#myUrl").append(content); should be $("#myUrl").attr('src', content);

It Should Worrk after these 2 steps. but if it doesn't follow to

Third:

wrap everything inside $.ajax() with $(document).ready() like following code:

$.ajax(settings).done(function (response) {
    $(document).ready(function(){
    console.log(response);
    var content = response.results[0].url;
    $("#myUrl").attr('src', content);

    });
});

Hope thats solved your problem

Upvotes: 0

ScanQR
ScanQR

Reputation: 3820

You need to set the src attribute img tag as follows,

$.ajax( settings ).done( function ( response ) {

    if (response.results[0].length > 0) {
       var content = response.results[0].url; 
       $( '#myUrl' ).attr( 'src', content );
    }
});

Upvotes: 0

Cookie1980
Cookie1980

Reputation: 108

Try to replace

 $("#myUrl").append(content);

with 

 $("#myUrl").attr('src', content);

Upvotes: 0

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

You need to set the src attribute of the image. Also, results is an array.

 $.ajax( settings ).done( function ( response ) {
       $( '#myUrl' ).attr( 'src', response.results[ 0 ].url );
 } );

Upvotes: 3

Related Questions