Leaflet.timeline geojson parsing error

Question

Trying to implement Leaflet.timeline and running into a problem with either the structure of the GeoJSON or something else.

To simplify debugging I've added the geojson as a var (in reality it's dynamically created by Rails). Here's the beginning:

 var data = [{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"start":"1903","end":"1908","name":"part of S. Toluca St. (26). and second block south gone","title":"Was Brook before 1903 and now is part of S. Toluca St. (26). and second block south gone 1908.","link=":91},"geometry":{"type":"LineString","coordinates":[[-118.25862396508458,34.06087254304104],[-118.25933206826451,34.05994816216629]]}},{"type":"Feature","properties":{"start":"1903","end":"1928","name":"part of E. 40th Place","title":"Was 37th St before 1903 and now is part of E. 40th Place 1928.","link=":650},"geometry":{"type":"LineString","coordinates":[[-118.25712423772116,34.01007010760971],[-118.25649456380442,34.01016443793837],[-118.25584971702219,34.01016443793837],[-118.25427932544667,34.0102021700405],[-118.25213995141625,34.010227324765935]]}},{"type":"Feature","properties":{"start":"1903","end":"1908","name":"part of E. 9th Place (21).","title":"Was 10th St.  before 1903 and now is part of E. 9th Place (21). 1908.","link=":3},"geometry":{"type":"LineString","coordinates":[[-118.24982816353442,34.035546195508864],[-118.25104052200915,34.03663976724366]]}},{"type":"Feature","properties":{"start":"1921","end":"","name":"Miramar St. One block abandoned","title":"Was 3rd St before 1921 and now is Miramar St. One block abandoned .","link=":645},"geometry":{"type":"LineString","coordinates":[[-118.26117539280003,34.05901974362122],[-118.2593849946753,34.05823410691563],[-118.25815599257271,34.05768101430694],[-118.25759459655055,34.05717191451128],[-118.25663111959356,34.05654339202722]]}},{"type":"Feature","properties":{"start":"1928","end":"1930","name":"Commonwealth Pl and a portion abandoned","title":"Was Auto Pl before 1928 and now is Commonwealth Pl and a portion abandoned 1930.","link=":50},"geometry":{"type":"LineString","coordinates":[[-118.28558737412096,34.07543021182353],...

I get to here in the Leaflet.timeline:

_process(data) {
  data.features.forEach((feature) => {

Looking at data:

In other words, it seems to be intact and understood. If run from here it fails with Uncaught TypeError: Cannot read property 'forEach' of undefined, so reload again and stop; and in the console data[0].features

and lastly data[0].features.forEach(feature) in the console:

What am I doing wrong or what else should I check? The geojson works with var segmentLayer = L.mapbox.featureLayer().loadURL('overview_data.geojson').addTo(laMap); but I would like to add a time slider.

Not direct answer, but I solved my bigger problem of reading a GeoJSON. As I said in Reading a GeoJSON file into Rails/Leaflet, I read the GeoJSON in with

$.getJSON("overview/overview_data.json", function (data) {
   <all the stuff I needed to to>
} )

Although it looks the same I must have restructured the GeoJSON a bit, because the problem mentioned here is gone.

Answer 1

Very likely you should not have wrapped your Feature Collection in an array.

While it is true that Leaflet's L.geoJSON factory also accepts arrays of GeoJSON objects, it does not seem to be the case of Leaflet.timeline plugin: it tries reading directly data.features, as if data was a single Feature Collection, whereas you pass in data as an array of Feature Collection(s).

In your debug you even explicitly look into an item of this array: data[0].features

Lastly, if you write forEach(feature), the JS engine expects feature to be a function (the callback to forEach), not a function parameter as it would have been if you wrote for example forEach(feature => {console.log(feature);}

Therefore you could very simply refactor a little bit your Rails backend to send a single Feature Collection object, not wrapped in an array.