Question

EDIT

I was a bit quick there, the problem arises in the function and not where I first said. Here is the function:

function returnAnObject(url) {
  var apiurl = 'http://url.com';

  var info = {};
  $.getJSON(apiurl, function(data) {
    $.extend(info, {
      a  : data.x,
      b  : data.y,
      c  : data.z
    });
  });

  console.log(info); // Shows object as usual
  console.log(info.a); // Shows undefined
  return info;
}

Does that make it clearer?

END EDIT

Ok so, I have a little problem.

I have a function that returns a fairly simple object, which looks something like this:

{
  a: 'x',
  b: 'y',
  c: 'z'
}

I save it to a variable like this:

var something = functionThatReturnsObject(someargument);
console.log(something); // In chrome dev tools, I see the object and its values
console.log(something.a); // This, however, logs undefined
console.log(something['a']); // This also logs undefined

Why is this? I think I’m going crazy here, I must have overlooked something…

The really weird part happens if instead of

var something = functionThatReturnsObject(someargument);

I write

window.something = functionThatReturnsObject(someargument);
console.log(something); // Still works, showing the object and properties
console.log(something.a); // Still doesn't work
console.log(someting['a']); // Still doesn't work

If I now access the object directly from the dev tools, inputting

something; // returns object, I can see everything in it etc.
something.a // Now, for some mysterious (to me) reason, this works, returning the value of a

So, does anyone understand what is going on here?

Answer 1

As I suspected. You’re assigning info in the success handler for an asynchronous function call. The success handler does not execute until AFTER the ajax call completes, but your function returns right after the ajax call starts (and long before it finishes and succeeds). You may not believe this, but this is the fourth time I’ve answered this exact same type of issue today. It’s a very common mistake. Because of the inline success handler, it appears that it all happens inside of the main function, but in reality it happens long after that function finishes.

You can’t use the return result from the ajax call until after the success handler is called. If you want to pass that result on to subsequent code, you will have to call that subsequent code from the success handler, not continue it after the returnAnObject function call.

It works in the dev tools because the ajax call completes by the time you type anything into the dev tools or look there. But, info.a is not available at the end of the returnAnObject function. It’s only available when the success handler for the ajax function is called.