function wait with return until $.getJSON is finished

Question

I am writing a function which has to get the thumbnail information from a given video using the embed.ly API, however currently the function returns a value before it even got the JSON result from the API.

I am using the following code:

function getThumbnail(vUrl) {
    var thumbnail   = '';
    var title       = '';
    var caption     = '';
    var content     = '';

    $.when( $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl) ).then(function(data){
        var thumbnail = data.thumbnail_url;
            console.log(thumbnail);

        return {
            thumbnail:thumbnail,
            vurl:vurl
        }
    });
}

However when using the Chrome Javascript console I can see that:

the function is called
undefined is returned
XHR request is finished
variable thumbnail content is shown in console

This is obviously the wrong order.

Any help is greatly appreciated!

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Bergi, May 12 '13 at 14:09

Joseph · Accepted Answer · 2015-01-19T14:09:31.183

Updated answer

getJSON returns a promise (a read-only deferred), so you can listen to it. But since you need some post-processing, you'd want to chain a then which allows you to alter the resolved value.

// Now using `then`
function getThumbnail(vUrl){
  return $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl).then(function(data){
    return {
      thumbnail:data.thumbnail_url,
      vurl:vurl
    }
  });
}

//and in your call will listen for the custom deferred's done
getThumbnail('the_vurl_').then(function(returndata){
  //received data!
});

Original answer

You can use a deferred object, and listen for the done().

function getThumbnail(vUrl) {
    //create our deferred object
    var def = $.Deferred();

    //get our JSON and listen for done
    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl)
        .done(function(data){

            //resolve the deferred, passing it our custom data
            def.resolve({
                thumbnail:data.thumbnail_url,
                vurl:vurl
            });
        });

    //return the deferred for listening
    return def;
}

//and in your call will listen for the custom deferred's done
getThumbnail('the_vurl_')
    .done(function(returndata){
        //received data!
    });

You could return $.getJSON's deferred to get the raw data. But because of "post-processing" into an object, the custom deferred is needed. You could also pass a callback to getThumbnail():

function getThumbnail(vUrl,callback) {
    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl,function(returndata){
        callback(returndata);
    });
}

getThumbnail('the_vurl_',function(returndata){
    //received data!
})

thanks! The deferred method unfortunatly didnt work for me however the callback did! — xorinzor, May 27 '12 at 17:42
I wanted to add a thank you, because this (the Deferred) fixed exactly the problem I was having with my own project. Thanks! — Frank, May 19 '14 at 17:49

score 6 · Answer 2 · answered Dec 02 '20 at 01:55

6

Using Async/Await

async function getThumbnail(vUrl) {
  const data = await $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vUrl);
  return {
      thumbnail:data.thumbnail_url,
      vurl:vUrl
    }
}

async function someFunction() {
    let thumbNail = await getThumbnail('the_vurl_');
}

answered Dec 02 '20 at 01:55

Tim Newton

1,463
1
13
13

1

As for today (near the end of 2021) I think this should be the right answer. – pvm14 Dec 14 '21 at 19:45
Finally, a simple example that works. Thank you – Eliezer Miron May 17 '23 at 22:52

score 2 · Answer 3 · answered May 27 '12 at 17:16

you can simple use $.getJSON's callback like following:

function result(res) {
  console.log(res);
}

function getThumbnail(vUrl) {
   var thumbnail   = '';
   var title       = '';
   var caption     = '';
   var content     = '';

   $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl, function(data) {
     var thumbnail = data.thumbnail_url;
     console.log(thumbnail);

     var result = {
        thumbnail:thumbnail,
        vurl:vurl
      };

     // passing the result to a function
     getResult(result);

   });
}

NOTE:

You see that I'm calling a function to pass the result, where you are trying to return, but you can't return result to caller function. Because, $.getJSON is asynchronous.

Yes but I'm not calling another function from the getThumbnail() function, so in this case this wont work for me. — xorinzor, May 27 '12 at 17:43

function wait with return until $.getJSON is finished

3 Answers3

Updated answer

Original answer

Linked

Related