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

我有一个按钮，返回下面的JSON文件

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

我的问题是，如何循环并显示Success函数中的每个字段？我尝试使用

$。每个
都没有用。还有，我如何计算每个值。我使用了
$（'#msg'）.html（data.length），但它计算JSON文件中的每个字符，而不是实际值。谢谢

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

这很明显，因为您还没有解析JSON，所以
数据
在这里被评估为
字符串

解决方案：

您需要先解析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（）
：

编辑：

Ajax调用中的另一个问题是为什么要使用
url:“getJSON.php”
？在这种情况下，Ajax调用只会将PHP文件的内容作为
字符串加载

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

演示：

下面是一个演示片段，详细说明了问题以及
1610
在
data.length中的来源：


var json='[{marker\u title:“Santa Venera”，“marker\u description:“家乡”，“经度”：“纬度”：“图标”：“未定义”}，{“marker\u title:“Hamrun”，“marker\u description:“Street”，“经度”：“0.1709747314453125”，“纬度”：“51.443950667096702”，“图标”：“https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png”，{“marker\u title:“PlaceA”，“标记说明”：“地点A”，“经度”：“0.292510986328125”，“纬度”：“51.40884344813292”，“图标”：“https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png”），{“标记名称”：“地点B”，“标记说明”：“地点B”，“经度”：“0.232086181640625”，“纬度”：“51.434106241971826”，“图标”：https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i\u maps.png“，{”marker\u title:“PlaceC”，“marker\u description:“PlaceC”，“longitude:“0.07656097412109375”，“lation:“51.43325010472878”，“icon:“https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i\u maps.png“，{”marker\u title:“Home”，“marker”，“marker\u description:“togration:“Town”，“longitude:“Town”，“longitude:“0.176955078125”，“longitu纬度“：”51.43753063050015“，”图标“：”https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/library\u maps.png“，”放置“，”标记描述“：”放置“，”经度“：”0.26641845703125“，”纬度“：”51.41783689062198“，”图标“：”https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking\u-lot\u-maps.png”，“，”标记名称“：”FF“，”标记描述“，”标记描述“：”EEE，“经度”：“0.2053070068359375”，“纬度”：“51.4268285639754”，“图标”：“https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking\\\ lot\\ maps.png”；“marker\\ title:“Qormi”，“marker\\ description:“Road”，“经度”：“14.471054077148438”，“纬度”：“35.875419840918845”，“图标”：“https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree”；”；
//记录json.length而不解析它
log（'logging json.length而不分析它'）；
log（json.length）；
var data=JSON.parse（JSON）；
//解析后记录data.length
log（'logging data.length after analysis'）；
console.log（data.length）；
正如@chsdk所说，
数据作为字符串而不是Javascript对象返回。您可能需要查看
$.getJSON（）
而不是
$.ajax（）
来迭代JSON对象

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

可能重复感谢您的回答@chsdk。我不知道为什么它在解析时不会输出长度值。当我删除data=JSON.parse（data）时会输出长度值；行，但结果大约是1600，这不是我想要的值。@N.Cre Make suer它是
.length
，因为您在帖子中以
.lenght
的形式编写它，它应该是这样工作的。当您在console中打印它时，会得到什么？尝试编写
console.log（数据）
看看你在浏览器控制台中得到了什么？我得到了这个错误..未捕获的语法错误：意外的标记<在JSON中的位置0在JSON.parse（）在Object.success（map.html:149）在I（jquery.min.js:2）在Object.fireWith[as resolveWith]（jquery.min.js:2）在A（jquery.min.js:4）在XMLHttpRequest。（jquery.min.js:4）我认为问题来自php文件，为什么在URL中使用
getJson.php
？它应该是您的JSON文件
success: function(data){
    data = JSON.parse(data);
    $('#msg').html(data.length);
    data.each(function(){
      //Your code here
    });
}

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