jQuery Each Multidimensional JSON Array

Question

I have the following problem which I can't solve for trying for 3 days now. I have an JSON array:

var geojson = {
 type: 'FeatureCollection',
 features: [
 {
 "type": "Feature",
 "geometry": {
 "coordinates": [
 5.140439,
 51.686608
 ],
 "type": "Point"
 },
 "properties": {
 "title": "TEST1",
 "rentals": true,
 "tackleshop": false,
 "fuel": false,
 "marker-color": "#1087bf",
 "marker-size": "large",
 "marker-symbol": "harbor"
 }
 },
 {
 "type": "Feature",
 "geometry": {
 "coordinates": [
 5.134060,
 51.686890
 ],
 "type": "Point"
 },
 "properties": {
 "title": "TEST2",
 "rentals": true,
 "tackleshop": false,
 "fuel": true,
 "marker-color": "#1087bf",
 "marker-size": "large",
 "marker-symbol": "harbor"
 }
 },
 {
 "type": "Feature",
 "geometry": {
 "coordinates": [
 5.133729,
 51.681425
 ],
 "type": "Point"
 },
 "properties": {
 "title": "TEST3",
 "rentals": false,
 "tackleshop": true,
 "fuel": true,
 "marker-color": "#1087bf",
 "marker-size": "large",
 "marker-symbol": "harbor"
 }
 }
 ]
 };

What I have been tested now:

$.each(geojson, function() {
 $.each(this, function(key, value) {
 $.each(this, function(value, featuress) {
 console.log(featuress.properties.title);
 });
 });
 });

The result I want: I want a $.each which goes through this json array where I am able to display the variable for as example: "title" for each feature.

Who can help me out? Cheers!

Answer 1

You looped over a JSON object for 2 times, I removed the outer foreach loops. You can only iterate over a list - features in this case. See the snippet:

var geojson = { 
 "type":"FeatureCollection",
 "features":[ 
 { 
 "type":"Feature",
 "geometry":{ 
 "coordinates":[ 
 5.140439,
 51.686608
 ],
 "type":"Point"
 },
 "properties":{ 
 "title":"TEST1",
 "rentals":true,
 "tackleshop":false,
 "fuel":false,
 "marker-color":"#1087bf",
 "marker-size":"large",
 "marker-symbol":"harbor"
 }
 }
 ]
}
$.each(geojson.features, function(i, feature) {
 console.log(feature.properties.title);
});
You looped over an object

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

For further reading:

• Beginner JavaScript: Working with JSON and Objects in JavaScript
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

Answer 2

As your code, geojson is a json object, it's not a json array.

Example for a json array is [{"name":"item 1"},{"name": "item2} ].

To go throught list features and display its property, you could try this:

$.each(geojson.features, function(index, feature) {
 console.log(feature.properties.title);
});