Handling an ajax return array of objects

Question

This is the ajax part that i think is causing the problem:

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

It is getting it's data from here:

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

This is the response taken from 'Developer tools- Network- censusdata2 - response'

[{"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"}]

Why you don't use $.each(data, function(v){ createmarker(...); }); — Svetoslav, Jun 24 '14 at 18:39
because I don't know how to, i don't know what "$.each(data, function(v){ createmarker(...); });" means. Does it go in the success: function (data) bit? — Dren79, Jun 24 '14 at 18:44
possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — cookie monster, Jun 24 '14 at 18:48
There is no "map" in your posted code... what does your initialize function look like? — geocodezip, Jun 24 '14 at 19:10
All your points are at the same location. Not very useful... — geocodezip, Jun 24 '14 at 19:19
var markers = []; var map; function initialize() { var mapOptions = { center: new google.maps.LatLng(53.408, -6.292), zoom: 8 }; map = new google.maps.Map(document.getElementById("map-container"),mapOptions); $.ajax ({ — Dren79, Jun 24 '14 at 19:23
`i don't know what "$.each(data, function(v){ createmarker(...); });" means` Try the documentation: [jQuery.each()](http://api.jquery.com/jquery.each/) — geocodezip, Jun 24 '14 at 21:43

score 0 · Accepted Answer · edited Jun 24 '14 at 19:20

0

In your success callback, you never loop over the array of data. Instead, you are trying to create one marker from an array of points.

Instead of

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

Try

$.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

edited Jun 24 '14 at 19:20

geocodezip

158,664
13
220
245

answered Jun 24 '14 at 18:43

Jonathan Wilson

4,138
1
24
36

Thank you but that is having the same problem, now the map isn't showing up at all. – Dren79 Jun 24 '14 at 19:03
1

What javascript errors are you getting? That concept works for me, see the working fiddle I added to the answer. – geocodezip Jun 24 '14 at 19:21

score 0 · Answer 2 · answered Jun 24 '14 at 18:43

0

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

This should run for each marker you got.. Put it inside the success: function(data) { ....... }

answered Jun 24 '14 at 18:43

Svetoslav

4,686
2
28
43

OK this is what i'v got now $.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); }); } }); and the map isn't showing up now – Dren79 Jun 24 '14 at 18:54

score 0 · Answer 3 · answered Jun 24 '14 at 19:12

Here's some code that puts your points on a map. See it working here: 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;
 }

Of course, only one marker will be visible due to all the points having the same set of coordinates.

Yea , that's great but how do I get the data into the var points= from the censusdata2? — Dren79, Jun 24 '14 at 19:51
That was answered here: http://stackoverflow.com/a/24394005/943730 It is your job to put the two together ;) — Jonathan Wilson, Jun 24 '14 at 19:53
Thank you all, my problem is now fixed , managed to delete a curly brace ... I used $.each(data,function(index,point) { createMarker(point.lat, point.lng, map, point.FORENAME); — Dren79, Jun 26 '14 at 12:11
Great! Now you have just to mark the correct answer, if there is one. — Jonathan Wilson, Jun 26 '14 at 12:20

Handling an ajax return array of objects

3 Answers3