key in object returning undefind after AJAX call

Question

I am doing an Ajax request on an XML file and mapping the XML into a JavaScript object my problem is that am logging the object and seeing the values I won't but when I try to return the values I keep getting undefined, even that all the code is inside the success callback of the AJAX request, my code is as bellow:

// Errors Object
var ErrorsObject = {};
var ErrorApplet = $('.AppletStyle1 table td');

// Ajax Request
$.ajax({
  type: "GET",
  url: "ECA_ADMIN_IO.xml",
  dataType: "xml",
  cache: false,
  success: function (xml) {
    $(xml).find('EcaAdminBc').each(function () { 
      var code = $(this).find('code').text();
      var msg = $(this).find('msg').text();
      ErrorsObject[code] = msg;
    });

    // Reformat Errors
    if(ErrorApplet.length > 0) {
      $(ErrorApplet).each(function(){
        var Error = $(this).text();
        if(Error.indexOf("SBL") >= 0){
          var ErrorCode = Error.split('(')[1].replace(")","");
          var ErrorText = ErrorsObject[ErrorCode];

          // The Log is showing the values correctly but i cant access the object values 
          console.log(ErrorsObject);

          // ErrorText And ErrorCode Are always undefined !!
          if(typeof ErrorText != 'undefined'){
            $(this).text(ErrorText);
          }
        }
      });
    } 
  }
});

I've edited the post, on the assumption that your problem wasn't caused by syntax errors. — sabof, Mar 30 '14 at 13:38
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Benjamin Gruenbaum, Mar 30 '14 at 13:40
Please do a `console.log(JSON.stringify(ErrorsObject), ErrorCode, ErrorText)` instead and post the result in your question — Bergi, Mar 30 '14 at 16:06
@BenjaminGruenbaum: Not really, he's only accessing them in the success callback. — Bergi, Mar 30 '14 at 16:07

score 0 · Answer 1 · answered Mar 30 '14 at 14:12

I need additional context, but I guess what the problem is. You are trying to do some thing like this:

var myFunction = function(){
  // Error Object
  var ErrorsObject = {};
  var ErrorApplet = $('.AppletStyle1 table td');

  $.ajax(
    type: "GET",
    url: "ECA_ADMIN_IO.xml",
    dataType: "xml",
    cache: false,
    success: function (xml) {
      //using response to fill ErrorsObject
      ErrorsObject['Ok'] = 'This key has Value!';
      //more awesome code here
      //... lets check again:
      console.log(ErrorsObject['OK']); //Outputs 'This key has Value!'
    }
  );

   return ErrorsObject;
};

var myAwesomeErrorObject = myFunction();
console.log(myAwesomeErrorObject['OK']); //undefined!
console.log(myAwesomeErrorObject); //Empty object!

The problem is that myFunction finished before the success callback function gets executed (the callback is asynchronous). That is why logging myAwesomeErrorObject['OK'] shows undefined. I guess that you also tried return ErrorsObject inside the success callback, but that won't work either.

In order to fix your code you must either:

Use the ErrorsObject inside the success callback (i.e. don't return it).
Call a second function from inside the success callback, passing it the ErrorsObject.
Pass a calback function to myfunction and execute it from inside the success callback.

key in object returning undefind after AJAX call

1 Answers1