处理 ajax 返回的对象数组答案

【问题标题】：Handling an ajax return array of objects处理 ajax 返回的对象数组
【发布时间】：2014-08-15 03:26:15
【问题描述】：

这是我认为导致问题的 ajax 部分：

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "./php/censusdata2.php",
        success: function (data) 
        {
            createMarker($list.data.lat, $list.data.lng, map, $list.data.FORENAME);
        }   
    });
google.maps.event.addDomListener(window, 'load', initialize);


function createMarker(lat, lng, map, title)
    {
        var latlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker(
        {
        position: latlng,
        map: map,
        title: title
        });
    marker.setMap(map);

    markers.push(marker);
    }

它从这里获取数据：

$list=array();  
        foreach ($s as $row):

        $data = new stdClass(); // create a new object
        $data->lat=htmlspecialchars($row['lat'], ENT_QUOTES, 'UTF-8');
        $data->lng=htmlspecialchars($row['lng'], ENT_QUOTES, 'UTF-8');
        $data->FORENAME=htmlspecialchars($row['FORENAME'], ENT_QUOTES, 'UTF-8');
        $data->SURNAME=htmlspecialchars($row['SURNAME'], ENT_QUOTES, 'UTF-8');

        array_push($list,$data); // push object to stack array
        endforeach;
    echo json_encode($list);

这是来自“开发者工具-网络-人口普查数据2-响应”的响应

[{"lat":"54.508869","lng":"-6.292547","FORENAME":"Ellen","SURNAME":"Wetherall"},{"lat":"54.508869","lng ":"-6.292547","FORENAME":"Annie","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William", "SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Wetherall"},{"lat":" 54.508869","lng":"-6.292547","FORENAME":"Henretta","SURNAME":"Wetheral"},{"lat":"54.508869","lng":"-6.292547","FORENAME" :"Mark","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{ "lat":"54.508869","lng":"-6.292547","FORENAME":"罗伯特 John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat ":"54.508869","lng":"-6.292547","FORENAME":"Lizzie","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547", "FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"玛丽 L","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Thompson"},{"lat ":"54.508869","lng":"-6.292547","FORENAME":"Anne","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547", "FORENAME":"James","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Joseph","SURNAME":"Thompson" },{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng": "-6.292547","FORENAME":"Annie","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME ":"穆赫兰"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Patrick","SURNAME":"穆赫兰"},{"lat":"54.508869" ,"lng":"-6.292547","FORENAME":"John","SURNAME":"穆赫兰"},{"lat":"54.508869","lng":"-6.292547","FORENAME":" Susan","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henry","SURNAME":"Johnstone"},{"lat ":"54.508869","lng":"-6.292547","FORENAME":"乔治 Hy","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William","SURNAME":"Helles"},{"lat ":"54.508869","lng":"-6.292547","FORENAME":"George","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547", “名字”：“安 Jane","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Elizabeth","SURNAME":"McCann"},{"lat ":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547", "FORENAME":"Charlotte","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Murray" },{"lat":"54.508869","lng":"-6.292547","FORENAME":"Joseph","SURNAME":"Murray"},{"lat":"54.508869","lng": "-6.292547","FORENAME":"Mary","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME ":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Gribben"},{"lat":"54.508869" ,"lng":"-6.292547","FORENAME":"George","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":" Selina","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Mulholland"},{"lat ":"54.508869","lng":"-6.292547","FORENAME":"安娜","SURNAME":"穆赫兰"},{"lat":"54.508869","lng":"-6.292547", “福伦AME":"Eliza","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Rachiel","SURNAME":"Mulholland"} ,{"lat":"54.508869","lng":"-6.292547","FORENAME":"Eliza","SURNAME":"穆赫兰"},{"lat":"54.508869","lng":" -6.292547","FORENAME":"James","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Robert","SURNAME" :"Nisbet"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Bowen"},{"lat":"54.508869", "lng":"-6.292547","FORENAME":"Elizabeth","SURNAME":"Bowen"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"玛格丽特","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henry","SURNAME":"O'Hara"}, {"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"O'Hara"},{"lat":"54.508869","lng": "-6.292547","FORENAME":"Mary","SURNAME":"McGarrell"}]

【问题讨论】：

我认为会出现在我的地图上的标记没有
为什么不使用 $.each(data, function(v){ createmarker(...); });
因为我不知道怎么做，我不知道“$.each(data, function(v){ createmarker(...); });”方法。是否成功：功能（数据）位？
Access / process (nested) objects, arrays or JSON的可能重复
您发布的代码中没有“地图”...您的初始化函数是什么样的？

标签： javascript php ajax google-maps-api-3 geolocation

【解决方案1】：

在您的success 回调中，您永远不会遍历数据数组。相反，您尝试从一组点创建一个标记。

代替

$.ajax({
    type: "GET",
    dataType: "json",
    url: "./php/censusdata2.php",
    success: function (data) 
    {
        createMarker($list.data.lat, $list.data.lng, map, $list.data.FORENAME);
    }   
});

试试

$.ajax({
    type: "GET",
    dataType: "json",
    url: "./php/censusdata2.php",
    success: function (data) 
    {
        $.each(data,function(index,point){
            createMarker(point.lat, point.lng, map, point.FORENAME);
        });
    }   
});

working fiddle

【讨论】：

谢谢你，但也有同样的问题，现在地图根本没有显示。
您遇到了哪些 JavaScript 错误？这个概念对我有用，请参阅我添加到答案中的工作小提琴。

【解决方案2】：

$.each(data, function(i,v) { 
     createMarker(v.lat, v.lng, map, v.FORENAME);
});

这应该针对您获得的每个标记运行.. 放在success: function(data) { ....... }里面

【讨论】：

好的，这就是我现在得到的 $.ajax({ type: "GET", dataType: "json", url: "./php/censusdata2.php", success: function ( data) { $.each(data, function(i,v) { createMarker(v.lat, v.lng, map, v.FORENAME); }); } });现在地图没有显示出来

【解决方案3】：

下面是一些将您的点放在地图上的代码。在这里看到它的工作：http://jsfiddle.net/wilsonjonash/ER92u/

JavaScript：

jQuery(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(54.508869, -6.292547);

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
    $.each(points,function(index,point){
        var latlng = new google.maps.LatLng(point.lat, point.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: point.FORENAME
        });
    });
});

var points = [{"lat":"54.508869","lng":"-6.292547","FORENAME":"Ellen","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henretta","SURNAME":"Wetheral"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mark","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Robert John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Lizzie","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary L","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Anne","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Joseph","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Patrick","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Susan","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henry","SURNAME":"Johnstone"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"George Hy","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"George","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Ann Jane","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Elizabeth","SURNAME":"McCann"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Charlotte","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Joseph","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"George","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Selina","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Anna","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Eliza","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Rachiel","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Eliza","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Robert","SURNAME":"Nisbet"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Bowen"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Elizabeth","SURNAME":"Bowen"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Margaret","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henry","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"McGarrell"}];

HTML：

<div id="map"></div>

CSS：

 #map {
     height: 500px;
     width: 500px;
 }

当然，由于所有点具有相同的一组坐标，因此只有一个标记可见。

【讨论】：

是的，这很好，但是如何从 censusdata2 将数据放入 var points= 中？
这里得到了回答：stackoverflow.com/a/24394005/943730 将两者放在一起是你的工作；）
谢谢大家，我的问题现在已经解决了，设法删除了一个花括号...我使用了 $.each(data,function(index,point) { createMarker(point.lat, point. lng, map, point.FORENAME);
太棒了！现在你只需要标记正确的答案，如果有的话。