Question

var buttonOptions = {
  gmap: map,
  name: 'Download JSON File',
  position: google.maps.ControlPosition.TOP_RIGHT,
  action: function () {
    $.ajax({
      type:"GET",
      contentType: "application/json; charset=utf-8",
      url: "getJSON.php",
      data: "{}",
      //dataType: 'json',
      cache:false,
      success: function(data){
      }
    });
  }
}

我有一个按钮，可以返回

下面的JSON文件

[{"marker_title":"Santa Venera","marker_description":"Hometown","longitude":"","latitude":"","icon":"undefined"},{"marker_title":"Hamrun","marker_description":"Street","longitude":"0.1709747314453125","latitude":"51.44395066709662","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"},{"marker_title":"PlaceA","marker_description":"PlaceA","longitude":"0.292510986328125","latitude":"51.40884344813292","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceB","marker_description":"PlaceB","longitude":"0.232086181640625","latitude":"51.434106241971826","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceC","marker_description":"PlaceC","longitude":"0.07656097412109375","latitude":"51.43325010472878","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"Home","marker_description":"Town","longitude":"0.1764678955078125","latitude":"51.43753063050015","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/library_maps.png"},{"marker_title":"PLACED","marker_description":"PLACED","longitude":"0.26641845703125","latitude":"51.41783689062198","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"FF","marker_description":"EEE","longitude":"0.2053070068359375","latitude":"51.426828563976954","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"Qormi","marker_description":"Road","longitude":"14.471054077148438","latitude":"35.875419840918845","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"}]

我的问题是，我如何循环并显示Success函数中的每个字段？我尝试使用$.each无济于事。另外我如何计算每个值。我使用$('#msg').html(data.length);，但它计算JSON文件中的每个字符，而不是实际值。感谢。

Answer 1

我使用了$('#msg').html(data.lenght);，但它正在计算JSON文件中的每个字符，而不是实际值。

这很明显，因为你还没有解析JSON，所以data在这里被评估为string。

<强>解决方案：

在尝试访问JSON data之前，您需要解析它。所以你的代码必须是这样的：

success: function(data){
    data = JSON.parse(data);
    $('#msg').html(data.length);
}

我将如何循环并显示Success函数中的每个字段？

然后，您可以在使用data解析后循环.each()：

success: function(data){
    data = JSON.parse(data);
    $('#msg').html(data.length);
    data.each(function(){
      //Your code here
    });
}

修改

您的Ajax调用中的另一件事是您使用url: "getJSON.php"的原因？在这种情况下，Ajax调用只会将PHP文件的内容加载为string。

在URL中，您应该放置.json文件或返回JSON字符串的Web服务。

<强>演示：

这是一个演示片段，详细显示问题以及1610来自data.length的位置：

var json = '[{"marker_title":"Santa Venera","marker_description":"Hometown","longitude":"","latitude":"","icon":"undefined"},{"marker_title":"Hamrun","marker_description":"Street","longitude":"0.1709747314453125","latitude":"51.44395066709662","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"},{"marker_title":"PlaceA","marker_description":"PlaceA","longitude":"0.292510986328125","latitude":"51.40884344813292","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceB","marker_description":"PlaceB","longitude":"0.232086181640625","latitude":"51.434106241971826","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceC","marker_description":"PlaceC","longitude":"0.07656097412109375","latitude":"51.43325010472878","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"Home","marker_description":"Town","longitude":"0.1764678955078125","latitude":"51.43753063050015","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/library_maps.png"},{"marker_title":"PLACED","marker_description":"PLACED","longitude":"0.26641845703125","latitude":"51.41783689062198","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"FF","marker_description":"EEE","longitude":"0.2053070068359375","latitude":"51.426828563976954","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"Qormi","marker_description":"Road","longitude":"14.471054077148438","latitude":"35.875419840918845","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"}]'; //logging json.length without parsing it console.log('logging json.length without parsing it'); console.log(json.length); var data = JSON.parse(json); //logging data.length after parsing it console.log('logging data.length after parsing it'); console.log(data.length);

Answer 2

正如@chsdk所说，data作为字符串而不是Javascript对象返回，您可能需要查看$.getJSON()而不是$.ajax()来迭代JSON对象

$.getJSON( "getJSON.php", function( data ) {
    var count = data.length;
    $.each( data, function( key, val ) {
        //perform operations on data
    });
});

http://api.jquery.com/jquery.getjson/

如何在通过AJAX检索其数据之后循环每个JSON值

2 个答案: