Uncaught TypeError: Cannot read property 'lat' of undefined when serializing leaflet data with $.param()

Question

I'd like to preface this: I'm very new to JavaScript. I am trying to post user location and map bounds with Leaflet and an AJAX call. In my event handler stateUpdater.onLocationFound the log statements print out the correct user coordinates and map bounds, however I get Uncaught TypeError: Cannot read property 'lat' of undefined when trying to serialize these values with $.param(). I am using Leaflet v0.7.2 and jQuery 1.11.0.

var map;

$(document).ready(function() {
    map = new L.map('map').setView([41.52, -71.09], 11);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);
    map.on('locationfound', stateUpdater.onLocationFound);

    stateUpdater.poll();
});

var stateUpdater = {
    errorSleepTime: 10000,

    poll: function() {
        map.locate({setView: true, maxZoom: 18});
    },

    onLocationFound: function(e) {
        //This log statement produces the correct output
        console.log(e.latlng.toString());
        var bounds = map.getBounds();
        //As does this one
        console.log(bounds.toBBoxString())
        var args = {
            "map_ne": bounds.getNorthEast(),
            "map_sw": bounds.getSouthWest(),
            "user_coords": e.latLng
        };
        //Uncaught TypeError thrown here
        $.ajax({url: "/a/state/updates", type: "POST", dataType: "text",
            data: $.param(args),
            success: stateUpdater.onSuccess,
            error: stateUpdater.onError});
    },

    onSuccess: function(response) {
        console.log(response);
        stateUpdater.errorSleepTime = 10000;
        window.setTimeout(stateUpdater.poll, 10000);
    },

    onError: function(response) {
        stateUpdater.errorSleepTime *= 2;
        console.log("Poll error; sleeping for", stateUpdater.errorSleepTime, "ms");
        window.setTimeout(stateUpdater.poll, stateUpdater.errorSleepTime);
    },
};

I have no hunches anymore as to what may be causing this, so I would greatly appreciate help.

Answer 1

It seems like bounds.getNorthEast(), bounds.getSouthWest() and e.latlng return objects that contains some functions in addition to lat,lng coordinates, like equal() and toString() which prevents $.param() from performing serialization of your data correctly and this causes your error, here is a good way to get only what you need from those objects:

    var ll= $.extend({},{lat:e.latlng.lat, lng:e.latlng.lng}), 
        neBounds = bounds.getNorthEast(), 
        neBoundsLl = $.extend({},{lat:neBounds.lat, lng:neBounds.lng}),
        swBounds = bounds.getSouthWest(), 
        swBoundsLl = $.extend({},{lat:swBounds.lat, lng:swBounds.lng}),
        args = {
        "map_ne": neBoundsLl,
        "map_sw": swBoundsLl,
        "user_coords": ll
    };

I tested this code and it worked for me,the error disappeared and the ajax request was sended successfully.