Why am I getting this error: "Uncaught TypeError: Cannot read the property" Header "undefined"?

Question

I am trying to write ajax web application. I have a function that should request a json object and then use it to refill the site.

Here is the Javascript in the 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; }; 

The following is a Chrome error:

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

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

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

And he changes the name to Home

Here is the 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 a review: Note: the function call below changed the title.

Answer 1

You can only access data from an AJAX request in a 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, rather than waiting for a response ... instead, JavaScript execution continues. Some time later, when the HTTP request for the AJAX request is completed, the callback you provided for the AJAX request is called and has access to the data contained in the HTTP response.

In your situation document.title = _doc.Title.Title; It is executed immediately after sending the AJAX request (i.e., before it happened some time later , as mentioned above); therefore the callback _doc = jQuery.parseJSON( data ); is not running yet, so _doc is still an empty object, so _doc.Title is undefined, and trying to get Title in undefined _doc.Title is an error.

Not related to your problem, but FYI, you can look at the jQuery.getJSON method; the difference between the jQuery.get method is that the response object you passed in will already be a JSON object (so you won’t need to call jQuery.parseJSON ).

Answer 2

Your $.get() function is asynchronous. This means that when you call it, all you do is START executing the ajax call. So the following line:

 document.title = _doc.Title.Title; 

executes before the ajax call ends. You only know that the ajax call completed the completion function in it.

To fix this, put a link to _doc in the ajax termination 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; } ); };