Question

I’m using a jQuery JSON function inside another function, how can I return an array made in the jQuery function as the return value of my parent function?

This is the basic setup:

function getFlickrSet(flickr_photoset_id){
  var images = [];
  
  images = $.getJSON(url, function(data){ return data; // I HAVE THE DATA HERE };
  
  return images // I HAVE NO DATA HERE
}
var myImages = getFlickrSet(23409823423423);
alert(myImages); // this gives me nothing

I have set up an example on JS Fiddle. Where is my code incorrect?

Answer 1

Well, Ajax is asynchronous (that’s what the ‘A’ stands for), so you must do this in an asynchronous way, which boils down to callbacks. What you need to do is pass a callback function to your outer function that you want to be called (“called back,” if you will) when the Ajax request completes. You could just give it ‘alert’ like this:

function getFlickrSet(flickr_photoset_id) {
  images = $.getJSON(url, alert); // <-- just the name of the function, no ()
}
var myImages = getFlickrSet(23409823423423);
// => An alert pops up with the data!

…but more likely you’d write something like this:

function doSomethingWithData(data) { // we'll use this later
  alert(data); // or whatever you want
}

function getFlickrSet(flickr_photoset_id, callback) {
  // new parameter here for a function ------^
  // to be given here -------v
  images = $.getJSON(url, callback);

  return images // I HAVE NO DATA HERE
}

var myImages = getFlickrSet(23409823423423, doSomethingWithData);
// => Your function `doSomethingWithData` will be called the data as a parameter
//    when the $.getJSON request returns.