Uncaught TypeError: d.Wa is not a function

Question

I am trying to add a feature collection fetched from a server to the source of an empty vector layer, but I am getting this error (using OpenLayers 3):

Uncaught TypeError: d.Wa is not a function

I am not finding much online to describe this error. IT is thrown at this point in my code:

segment.getSource().addFeatures(features);

the segment layer is initialized globally, with an empty source (I am using Backbone)

 window.globals.segment = new ol.layer.Vector({
      source: new ol.source.Vector({

            }),
      visible: true,
      style: new ol.style.Style({
          stroke: new ol.style.Stroke({
              color: '#022835',
              width: 4
          })
      })
  });

The features are fetched from a server then read into a geojson:

            if (response.length > 0) {

                   if (response[0][0].features[0].geometry.type === 'MultiLineString') {

                       _.map(respfeatures.features, function (feature) {
                        feature.properties.segmentid = feature.properties.f1;
                        feature.properties.street = feature.properties.f2;
                    });
                } else {
                       _.map(respfeatures.features, function (feature) {
                        feature.properties.nodeid = feature.properties.f1;
                    });
                }


                   return new ol.format.GeoJSON().readFeatures(respfeatures.features, {
                    dataProjection: 'EPSG:2263',
                    featureProjection: 'EPSG:3857', rightHanded; false
                   });

            }
        }).then(function (features) {

            console.log(features);

            window.globals.segment.getSource().addFeatures(features[0][0].features);
        });

The error is thrown at the last line..I can see in the console statements that I am getting a feature collection returned.

EDIT: I drilled down into the returned features, and now I do not get an error, but I still do not get any segments rendered on the screen:

 console.log("features : " + (JSON.stringify(newfeatures[0][0])));

returns (what appears to be) a valid geoJSON

now I am trying

window.globals.segment.getSource().addFeatures(newfeatures[0][0]);

..no errors, but no segments rendered either

Bewlow is the response from the server, which appears to me to be valid geoJSON

(below is returned from

  console.log('response: ' + JSON.stringify(response[0][0].features));

response: [{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[1024345.25673969,182382.254051775],[1024608.61874577,182429.714914858]]]},"properties":{"f1":51278,"f2":"151 AVENUE"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[1024500.74855469,182994.720346525],[1024608.61874577,182429.714914858]]]},"properties":{"f1":51279,"f2":"80 STREET"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[1024608.61874577,182429.714914858],[1024715.1477322,181869.545103431]]]},"properties":{"f1":51281,"f2":"80 STREET"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[1024608.61874577,182429.714914858],[1024868.00470994,182478.149529263]]]},"properties":{"f1":51282,"f2":"151 AVENUE"}}]

I tried this as well, which does not throw an error, but does not result in the features being rendered either:

 window.globals.segment.getSource().getFeatures().push(newfeatures[0][0]);

EDIT 2:

I made a slight change to the scope of the empty aray in the save method, so now I am getting a FeatureCollection returned:

 {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[996193.689683363,207843.941317275],[996589.742040858,208151.906580597]]]},"properties":{"f1":35167,"f2":"COMMERCIAL STREET","segmentid":35167,"street":"COMMERCIAL STREET"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[996603.364060864,207892.573109776],[996589.742040858,208151.906580597]]]},"properties":{"f1":35172,"f2":"MANHATTAN AVENUE","segmentid":35172,"street":"MANHATTAN AVENUE"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[996603.364060864,207892.573109776],[997219.481595024,207967.464692265]]]},"properties":{"f1":35173,"f2":"BOX STREET","segmentid":35173,"street":"BOX STREET"}}]}

...this gives me a valid rendered layer in QGIS..but the features are still not rendered in my app.

Answer 1

I think it has something to do with the fact that your geojson data should be more like this :

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
 // and here go all your features
 ]
 }

while I don't have a good solution to solve it using OL3, you can try a work-around by handling it as a string and adding the GeoJSON header below with the string1.concat(string2) in javascript

or you could review your data retrieving code from the server

the ol.source.Vector() takes a Features, so I guess your geoJSON data should be as a FeatureCollection