Why am i getting this error: “Uncaught TypeError: Cannot read property 'Title' of undefined”?

Question

I am trying to write an ajax web app. I have a function that is suppose to request a json object and then use it to re/populate the website.

Here is the Javascript in Question (Lines 8 - 16) :

window.onload=LoadData("Home", {});
var _doc = {};
function LoadData(page, params) {
    $.get(page, params, function ( data ) { 
        _doc = jQuery.parseJSON( data ); 
        }
    );
    document.title = _doc.Title.Title;
};

Here is the error Chrome gave:

Uncaught TypeError: Cannot read property 'Title' of undefined
LoadDatahttp://127.0.0.1/:15
(anonymous function)

This is what has me confused if I run the same statement in the console:

document.title = _doc.Title.Title;
"Home"

And it changes the title to Home

Here is proof that its not undefined:

_doc
Object
   Body: Object
      Menus: Array[4]
         0: Object
            Menu: Object
         1: Object
            Menu: Object
         2: Object
            Menu: Object
         3: Object
            Menu: Object
   Title: Object
      Title: "Home"
   User: Object
      Name: "Username"

And A screenshot as an overview: Note: the call to the function at the bottom did change the title

Answer 1

You can only access the data from the AJAX request in the callback:

window.onload=LoadData("Home", {});
var _doc = {};
function LoadData(page, params) {
    $.get(page, params, function ( data ) { 
          _doc = jQuery.parseJSON( data ); 
          document.title = _doc.Title.Title;
        }
    ));
};

AJAX requests ( Asynchronous JavaScript and XML) requests are asynchronous; the browser initiates the request, and does not wait for a response... instead the JavaScript execution is continued. Some time later , when the HTTP request for the AJAX request has completed, the callback you provided for the AJAX request is invoked, and has access to the data contained in the HTTP response.

In your situation, document.title = _doc.Title.Title; is executed immediately after the AJAX request is dispatched (ie before the some time later mentioned above has occured); so the callback _doc = jQuery.parseJSON( data ); has not fired yet, so _doc is still an empty object, so _doc.Title is undefined, and trying to retrieve Title on the undefined _doc.Title is throwing the error.

Unrelated to your problem, but FYI, you might want to look at the jQuery.getJSON method; the difference between that that the jQuery.get method is that the response object you get passed will already be the JSON object (so you won't need to call jQuery.parseJSON ).

Answer 2

Your $.get() function is asynchronous. That means that when you call it, all you are doing is STARTING the execution of the ajax call. Thus, the line following it:

document.title = _doc.Title.Title;

is executing BEFORE the ajax call has completed. You only know the ajax call has completed in it's completion function.

To fix this, put the reference to _doc in the ajax completion function:

window.onload=LoadData("Home", {});
var _doc = {};
function LoadData(page, params) {
    $.get(page, params, function ( data ) { 
        _doc = jQuery.parseJSON( data ); 
        document.title = _doc.Title.Title;
        }
    );
};