How to loop json format array variable in javascript

Question

This is my code, using for marking all places that I fetched from my database in google map.

 $.ajax({
        url:"http://localhost/church_finder/index.php/MapController/search_church",
                type:'POST',
                data:{coordinates:coordinates}
                 success: receiver               
               });

Here I call the function receiver with the result I got from the database.

function receiver(data, textStatus, XMLHttpRequest) {

var json = JSON.parse(data);

var features = [
            for( var i=0; i<json.length; i++) {
            var lat=json[0]["lat"];
            var lng=json[0]["lng"];
                {
                    position: new google.maps.LatLng(lat,lng),
                },
            }
            ];

     features.forEach(function(feature) {
                var marker1 = new google.maps.Marker({
                    position: feature.position,
                    map: map
                });
            });     
}

This is the result data I getting from ajax

[{"lat":"10.526800731337735","lng":"76.20941162109375"}, {"lat":"10.622100079463674","lng":"76.1424207687378"},{"lat":"10.604004340704408","lng":"76.14100456237793"},{"lat":"10.608644375798574","lng":"76.13735675811768"},{"lat":"10.624419968495433","lng":"76.13675594329834"},{"lat":"10.62436724394038","lng":"76.13685250282288"},{"lat":"10.624377788852131","lng":"76.13693833351135"},{"lat":"10.615815200680679","lng":"76.1367130279541"},{"lat":"10.601726479547619","lng":"76.13688468933105"},{"lat":"10.610500370131295","lng":"76.13244295120239"},{"lat":"10.631991120088175","lng":"76.13566160202026"}]

but when am using forloop inside var feature I got error like this "Uncaught SyntaxError: Unexpected token for". How can i loop and mark all this coordinate in google map.

You can't put a for loop inside an array like that.

gforce301
– gforce301

2018-02-01 16:41:24 +00:00
Commented Feb 1, 2018 at 16:41 — gforce301
– gforce301, Commented Feb 1, 2018 at 16:41

Ele · Accepted Answer · 2018-02-01 16:46:25Z

2

This is your approach

var json = JSON.parse(data);

var features = [
    for( var i=0; i<json.length; i++) {
    var lat=json[0]["lat"];
    var lng=json[0]["lng"];
        {
            position: new google.maps.LatLng(lat,lng),
        },
    }
    ];

features.forEach(function(feature) {
        var marker1 = new google.maps.Marker({
            position: feature.position,
            map: map
        });
    });     
}

There are some issues in your code

You're trying to execute a for-loop within both brackets []

var features = [  
    for( var i=0; i<json.length; i++) { <- Here
    var lat=json[0]["lat"];
    var lng=json[0]["lng"];
        {
            position: new google.maps.LatLng(lat,lng),
        },
    }
    ];
    ^

You're always itetaring with position 0

var lat=json[0]["lat"];
var lng=json[0]["lng"];
             ^

You have an expression that never was assigned to a variable:

{
    position: new google.maps.LatLng(lat,lng),
},
^

Look this code snippet with those fixes

var json = [{"lat":"10.526800731337735","lng":"76.20941162109375"}, {"lat":"10.622100079463674","lng":"76.1424207687378"},{"lat":"10.604004340704408","lng":"76.14100456237793"},{"lat":"10.608644375798574","lng":"76.13735675811768"},{"lat":"10.624419968495433","lng":"76.13675594329834"},{"lat":"10.62436724394038","lng":"76.13685250282288"},{"lat":"10.624377788852131","lng":"76.13693833351135"},{"lat":"10.615815200680679","lng":"76.1367130279541"},{"lat":"10.601726479547619","lng":"76.13688468933105"},{"lat":"10.610500370131295","lng":"76.13244295120239"},{"lat":"10.631991120088175","lng":"76.13566160202026"}];

var features = [];

for (var i = 0; i < json.length; i++) {
  var lat = json[i]["lat"];
  var lng = json[i]["lng"]; 

  features.push({
    position: new google.maps.LatLng(lat, lng),
  });
}

features.forEach(function(feature) {
  var marker1 = new google.maps.Marker({
    position: feature.position,
    map: map
  });
});

Resources

Loops and iteration

edited Feb 1, 2018 at 16:46

answered Feb 1, 2018 at 16:44

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mhodges Over a year ago

I missed this the first go around as well, but json[0] should be json[i]

mhodges Over a year ago

Good explanation of the issue. +1'd

Stevin George Over a year ago

@Ele Thank you so much it's working fine. Sorry that's my mistake i forgot to change, before i put 0 without for loop to check it's working or not. Any way Thank You.

mhodges · Accepted Answer · 2018-02-01 16:46:55Z

2

You can't put the for keyword inside of an array, as you are trying to do in features = [ for (...) {} ]. Try this instead:

function receiver(data, textStatus, XMLHttpRequest) {

  var json = JSON.parse(data);

  var features = [];
  for (var i = 0; i < json.length; i++) {
    var lat = json[i]["lat"];
    var lng = json[i]["lng"]; 
    // push object into features array
    features.push({ position: new google.maps.LatLng(lat, lng) });
  }

  features.forEach(function(feature) {
    var marker1 = new google.maps.Marker({
      position: feature.position,
      map: map
    });
  });
}

Or, to make it more concise, you can use ES6 Object destructuring with Array.map, like so:

var features = json.map(({lat, lng}) => ({position: new google.maps.LatLng(lat, lng)}));

edited Feb 1, 2018 at 16:46

answered Feb 1, 2018 at 16:41

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to loop json format array variable in javascript

2 Answers 2

This is your approach

There are some issues in your code

Look this code snippet with those fixes

Resources

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

This is your approach

There are some issues in your code

Look this code snippet with those fixes

Resources

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related