leaflet javascript for loop through geojson

Question

I have a url containing simple point feature geojson that I am displaying in my web map.

{"type": "FeatureCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"type": "Feature", "properties": {"name": "WORK", "pk": "3"}, "geometry": {"type": "Point", "coordinates": [-74.66645479202272, 40.79366860930495]}}, {"type": "Feature", "properties": {"name": "Great Swamp", "pk": "5"}, "geometry": {"type": "Point", "coordinates": [-74.47975158691408, 40.71239442660529]}}, {"type": "Feature", "properties": {"name": "stupid abid", "pk": "1"}, "geometry": {"type": "Point", "coordinates": [-74.25096586314858, 40.64616085364607]}}, {"type": "Feature", "properties": {"name": "Rutland", "pk": "2"}, "geometry": {"type": "Point", "coordinates": [-72.97393798828126, 43.61022814178643]}}, {"type": "Feature", "properties": {"name": "Sota", "pk": "4"}, "geometry": {"type": "Point", "coordinates": [-94.52636718750001, 46.46813299215556]}}]}

in js

I simply use

var incidences = new L.GeoJSON.AJAX("http://127.0.0.1:8000/incidence_data/")
incidences.addTo(map);

and it correctly gets added.

I know there is a onEachFeature option which would essentially act as a for loop going through each feature but I want to know how to use a for loop to on the incidences variable and print out each name

for (var x in incidences.features)
    console.log(incidences.features[x].properties.name);

nothing shows up

console.log(incidences)

e {urls: Array(1), ajaxParams: {…}, _layers: {…}, options: {…}, _events: {…}, …}
ajaxParams
:
{dataType: "json", callbackParam: "callback", local: false, middleware: ƒ}
options
:
{}
urls
:
["http://127.0.0.1:8000/incidence_data/"]
_events
:
{data:loaded: Array(1), data:progress: Array(1)}
_firingCount
:
0
_initHooksCalled
:
true
_layers
:
{1334: e, 1336: e, 1337: e, 1338: e, 1339: e}
_leaflet_id
:
1335
__proto__
:
e

IvanSanchez IvanSanchez · Accepted Answer · 2018-08-21T07:31:35

I want to know how to use a for loop to on the incidences variable

You can't.

In your code, incidences is an instance of L.GeoJSON.AJAX. Because of class inheritance, it's also an instance of L.GeoJSON, L.FeatureGroup, and L.LayerGroup.

None of those classes implement the iterator protocol, therefore it's not possible to use a for..of loop. And if you try to use a for..in loop, that will iterate through the instance's methods and properties, not through the GeoJSON features.

The canonical way in Leaflet to do what you want to do is to use the getLayers() method of L.LayerGroup (which, because of class inheritance, is also available in L.FeatureGroup, L.GeoJSON and L.GeoJSON.AJAX), store the resulting Array somewhere, and iterate through that:

var incidenceGroup = new L.GeoJSON.AJAX("http://127.0.0.1:8000/incidence_data/")

/* ...wait for it to load with whatever method... */

var incidenceLayers = incidenceGroup.getLayers(); // incidenceLayers will be an Array

for (var incidence of incidenceLayers) { /* do stuff */ }

// Or also a more classical for(;;) loop:
for (var i, l=incidenceLayers.length; i<l; i++) { 
   var incidence = incidenceLayers[i];
   /* do stuff */ 
}

leaflet javascript for loop through geojson

1 Answers