How can I serialize all features on a layer to json using openlayers 3

Question

I want to allow a user to draw a polygon on a map using openlayers 3 and then when the user presses "save" I want to put the json for the polygon into a hidden field so that it can be sent back to the server and saved in a database.

I have the code to draw the polygon working (below), and then I have written a simple test function that fires when a button is pressed. The getFeatures() call fails. In firebug the message shown in the console is "TypeError: vectorsource.getFeatures is not a function". This is the click function:

function map1_generateJSON()
{
    var geojson  = new ol.parser.GeoJSON;
    var features = vectorsource.getFeatures();
    var json     = geojson.write(features);
    alert(json);
}

The openlayers base I am using is

<script type="text/javascript" src="http://ol3js.org/en/master/build/ol.js"></script>

This is the code that displays the map and allows the user to draw a polygon (it's mostly copied from one of the standard openlayers examples at Open Layers 3 draw features example).

var vectorsource    = new ol.source.Vector();
var vector = new ol.layer.Vector({
  source: vectorsource,
  style: new ol.style.Style({
    rules: [
      new ol.style.Rule({
        filter: 'renderIntent(\"selected\")',
        symbolizers: [
          new ol.style.Shape({
            fill: new ol.style.Fill({
              color: '#0099ff',
              opacity: 1
            }),
            stroke: new ol.style.Stroke({
              color: 'white',
              opacity: 0.75
            }),
            size: 14
          }),
          new ol.style.Fill({
            color: '#ffffff',
            opacity: 0.5
          }),
          new ol.style.Stroke({
            color: 'white',
            width: 5
          }),
          new ol.style.Stroke({
            color: '#0099ff',
            width: 3
          })
        ]
      }),
      new ol.style.Rule({
        filter: 'renderIntent(\"temporary\")',
        symbolizers: [
          new ol.style.Shape({
            fill: new ol.style.Fill({
              color: '#0099ff',
              opacity: 1
            }),
            stroke: new ol.style.Stroke({
              color: 'white',
              opacity: 0.75
            }),
            size: 14,
            zIndex: 1
          })
        ]
      })
    ],
    symbolizers: [
      new ol.style.Shape({
        fill: new ol.style.Fill({
        color: 'black',
        opacity: 1
        }),
        size: 14
      }),
      new ol.style.Fill({
        color: 'white',
        opacity: 0.2
      }),
      new ol.style.Stroke({
    color: 'black',
            width: 2
      })
    ]
  })
});

var map1_olmap = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})}), vector],
    renderer: ol.RendererHint.CANVAS,
    target: map1,
    view: new ol.View2D({
        center: ol.proj.transform([-113.5, 53.533333], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
     })
});

var map1_draw;
function map1_addMapInteraction()
{
    map1_draw = new ol.interaction.Draw({
        layer: vector,
        type: 'Polygon'
    });
    map1_olmap.addInteraction(map1_draw);
}
map1_addMapInteraction();

Answer 1

Regarding this line

    var json     = geojson.write(features);

you need to

    var  json     = geojson.writeFeatures(features);

I am trying to do the same thing but the result is an object not a string. I need a string so I can store it to my database.