1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Invoking Callback Results In Uncaught TypeError: Cannot Read Property

Discussion in 'JavaScript' started by Madscripter, Sep 15, 2015.

  1. #1
    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.
    SEMrush
     
    Last edited: Sep 15, 2015
    Madscripter, Sep 15, 2015 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,626
    Likes Received:
    719
    Best Answers:
    151
    Trophy Points:
    420
    #2
    How do you actually USE your code? Nowhere in the code you pasted are the variables assigned to the different functions assigned.
     
    PoPSiCLe, Sep 16, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,625
    Likes Received:
    1,559
    Best Answers:
    225
    Trophy Points:
    515
    #3
    "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.
     
    deathshadow, Sep 16, 2015 IP