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:
This is obviously the wrong order.
Any help is greatly appreciated!
The getJSON() method is used to get JSON data using an AJAX HTTP GET request.
It is a callback function that executes on the successful server request. It also has three parameters that are data, status, and xhr in which data contains the data returned from the server, status represents the request status like "success", "error", etc., and the xhr contains the XMLHttpRequest object.
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! });
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! })
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With