Invoking Callback Results In Uncaught TypeError: Cannot Read Property

Hi all, I am trying to call a web service to grab some data from the database using an HTTP Get request. Once the data are returned by the web service, I will try to pass them to a callback function and display them on the screeen. Please take a look at my code below.

var lat, lng, latlong, distance, results;
function GetLocationFromWebService(latlong, distance, results, callback) {
lat = latlong.lat();
lng = latlong.lng();
var data = { lat: lat, lng: lng, distance: distance, results:results };

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState ==4 && xhr.status == 200) {
callback(xhr.responseText);
};
xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(data));
}

//Calling GetLocationFromWebService
GetLocationFromWebService(latlong, distance, results, DisplayLocationData);

//Requesting latlong from Google API and initializing global variables 
function GetLatLong(adr, callback) {
        distance = "15";   //Simulating distance value entered by user
        results = "10"       //Simulating results value entered by user
        geocoder.geocode({ 'address': adr }, function (searchResults, searchStatus) {
        latlong = searchResults[0].geometry.location;    
        callback(latlong, distance, results, GetLocationFromWebService);
        });
}

//Sending user address to GetLatLong()
function GetUserAddress() {
var address = "77 Massachusetts Ave, Cambridge, MA 02139"; //Simulate user input
GetLatLong(address, GetLocationFromWebService);
}

Code (JavaScript):

I get the error "Uncaught TypeError: Cannot read property 'lat' of undefined", when I run my code. Please help point out what is causing that error message, thanks in advance.

 

How do you actually USE your code? Nowhere in the code you pasted are the variables assigned to the different functions assigned.

 

"callback" is local in scope, it won't exist when your anonymous function is called inside your readyStateChange handler. To get around that I'd suggest adding your own property to the xml request object to store things like the 200 handler in. XHR would ALSO not exist when that function is called, which is why you are better off accepting the xml object as the result of the handler.

You also seem to use a lot of global and local vars with the same name .. and miss closing a }... really some proper formatting on that would go a LONG ways towards pointing out the issues as you kind of have a confusing mess.

Something like this:

function getLocationFromWebService(iLatLong, iDistance, iResults, handler) {
	var xhr = new XMLHttpRequest();
	// create our own method on the xml object to store our 200 handler
	xhr.status200 = handler;
	/*
		xhr is LOCAL to this function, won't exist / be accessible when
		onreadystatechange fires. Thankfully onreadystatechange passes itself
		to the handler
	*/
	xhr.onreadystatechange = function(x) {
		if (x.readyState == 4 && x.status == 200) {
		x.status200(x.responseText);
	};
	xhr.open('get', 'http://localhost:21311/myService.asmx/GetClosestPlace', true);
	xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
	// no need for global or extra vars just to do this
	xhr.send(JSON.stringify({
		lat : iLatlong.lat(),
		lng : iLatlong.lng(),
		distance : iDistance,
		results : iResults
	}));
}

Code (markup):

For example cleans it up some... You seem to switch in and out of having local vars and paremeters/globals with the same name it's very hard to make any sense of what you're trying to accomplish here.