sending openlayers3 event over ajax results in RangeError

Question

The error in chrome console is RangeError: Maximum call stack size exceeded

I use the following code:

   draw.on('drawend',
        function(evt) {
          var fe = evt.feature
          console.log(fe);
          var parser = new ol.format.GeoJSON();
          var features = source.getFeatures();
          var featuresGeoJSON = parser.writeFeatures(features);
          $.ajax({
                  url: "http://0.0.0.0:3000/features.json",
                  method: "POST",
                  data: fe
          }); 
        },
      this);

The evt.feature object looks ok in developer tools console.

Answer 1

Make sure you are serializing the feature that you get in the event and not the features from the source. And $.ajax either expects a string or an object with key-value-pairs. Because you want to send the whole object, you will have to use JSON.stringify() to serialize the object. Something like:

draw.on('drawend',
    function(evt) {
      var parser = new ol.format.GeoJSON();
      var featureGeoJSON = parser.writeFeature(evt.feature);
      $.ajax({
              url: "http://0.0.0.0:3000/features.json",
              method: "POST",
              data: JSON.stringify(featureGeoJSON)
      }); 
    },
  this);