如何在JavaScript中循環JSON格式數組變量

Question

這是我的代碼，用於標記從Google Map中數據庫中獲取的所有地點。

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

在這里，我使用從數據庫獲得的結果調用函數接收器。

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
                });
            });     
} 

這是我從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”}]

但是，當在var功能中使用forloop時，出現類似“未捕獲的SyntaxError：意外的令牌”的錯誤。 如何在Google地圖中循環並標記所有這些坐標。

Answer 1

您不能將for關鍵字放入數組中，就像您要在features = [ for (...) {} ] 。 嘗試以下方法：

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
    });
  });
}

或者，為了使其更簡潔，可以將ES6 Object destructuring與Array.map一起Array.map ，如下所示：

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

Answer 2

這是你的方法

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
        });
    });     
} 

您的代碼中有一些問題

您正在嘗試在兩個方括號[]執行for-loop

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),
        },
    }
    ];
    ^

您總是在位置0意大利面

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

您有一個從未分配給變量的表達式：

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

使用這些修復程序查看此代碼段

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
  });
});

資源

• 循環與迭代