Question

I have the following code and want to use it as an object.

How to i access the properties of the object? currently i am always getting undefined!

function getLoggerInfo()
{

    $.ajax({
    url: "data.json",
    type: "GET",
    data: {emGetInfo: "logger"},
    dataType: "json",
    success: function(response){
        //alert("1: " + this.loggerName);
        loggerName = response.emGetInfo[0].loggerName;
        protocol = response.emGetInfo[0].protocolVersion;
        $("#console").text("Logger Name: " + loggerName + " - Protocol Version: " + protocol);
        return;
        },
    error: function(jqXHR, textStatus, errorThrown){
        $("#console").text("ERROR: AJAX errors. " + jqXHR + " : " + textStatus + " : " + errorThrown);
        return;
        },
    statusCode: {
        404: function() {
            $("#console").text("404: The requested JSON file was not found.");
        return;
        }
    }
}); 
}

// get loggerName…

$(document).ready(function () {

   // Get logger info event...
   $("#ajax").click(function() {
    var loggerInfo = new getLoggerInfo();
    alert("Loggername: "+ loggerInfo.loggerName);
});

});

Answer 1

AJAX is asynchronous – so it does not return data … the following is a (rough) outline of what happens when you use the $.ajax() function

1. The data is sent to the url
2. The browser continues – executing other code as required
3. When the url (called in step 1) finishes being processed the success callback is executed.

Step 3 could be 1 second, 10 seconds, 5 minutes later

you should process the request in the success callback :

$.ajax({
    url: "data.json",
    type: "GET",
    data: {emGetInfo: "logger"},
    dataType: "json",
    success: function(response){
      // process here
      loggerName = response.emGetInfo[0].loggerName;
      alert(loggerName);
    }
});