How to return an array made in a child jQuery function from the parent function in JavaScript?

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?

Pointy · Accepted Answer · 2011-09-21 21:08:23Z

4

You can't. Instead, pass in a function:

function getFlickrSet(flickr_photoset_id, when_ready){
  var images = [];

  $.getJSON(url, function(data){ 
    // prepare images
    when_ready( images );

  });
}

getFlickrSet(nnnn, function(images) {
  alert(images);
});

Why can't you do that? Because the "$.getJSON()" call is asynchronous. By the time that the callback function is called (where you wrote, "I HAVE THE DATA HERE"), the outer function has returned already. You can't make the browser wait for that call to complete, so instead you design the API such that code can be passed in and run later when the result is available.

answered Sep 21, 2011 at 21:08

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Over a year ago

thank you so much for telling me whats going on, as i'm new to javascript, could you please kindly look at the jsfiddle example and show me how this would be implemented. I would greatly appreciate it. thank you!

Jordan Running · Accepted Answer · 2011-09-21 21:16:32Z

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.

edited Sep 21, 2011 at 21:16

answered Sep 21, 2011 at 21:10

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

4 Comments

Mohammad Over a year ago

Thanks Jordan, that shed some light on what is going on, seeing that I'm new to this language, if you could see where i've gone in implementing your solution I would greatly appreciate your time. jsfiddle.net/taheri/6DQuK/3

Pointy Over a year ago

@Mohammad no, that's not going to work. You can return things from the AJAX handler function, but jQuery has no place to put it so it's just thrown away. You have to do it as Jordan and I have written above.

Mohammad Over a year ago

I was wondering, is there any way I can pass an argument to the call back function "doSomethingWithData" other than data?

Mohammad Over a year ago

found the answer over here : ) stackoverflow.com/questions/3430380/…

Collectives™ on Stack Overflow

How to return an array made in a child jQuery function from the parent function in JavaScript?

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related