CODEWITHSUNDEEP
phpajaxjquery
Ash
Ash

Reputation: 1309

Returned array from ajax query looks ok but its organs do not appear properly

I'm passing the coordinates of a map's viewport bounds to the server who returns all the coordinates in the db which are in this area, as a jsoned array.
When I'm not using ajax and I send hard coded numbers instead of parameters it's working fine: 

<script type="text/javascript">
var coordinatesMap = 
<?php
    global $wpdb;
    $sql = "SELECT user_id, lat, lng FROM coordinates WHERE lat>30 and lat<50 and lng>-80 and lng<20";
    $rows = $wpdb->get_results($sql, OBJECT_K);

    if (is_array($rows)) {
        echo json_encode($rows);
    } else {
        echo '{}';
    }
?>;

alert(coordinatesMap);

for (var id in coordinatesMap)
{
    if (coordinatesMap.hasOwnProperty(id))
    {
        alert(id);
        alert(coordinatesMap[id].lat);
        alert(coordinatesMap[id].lng);
    }
}                               
</script>

The only strange thing here is that alert(coordinatesMap); gives this alert [object Object]. But that's not the issue. The rest of the alerts are fine: 177, 40.058, -74.405, 178, 40.714, -74.005.

But in "real life" I have to pass parameters to the server so I use ajax like this:
The ajax call:

$.ajax({
    type: "POST",
    url: "markers.php",
    data: ({'southWestLat' : southWestLat , 'southWestLng' : southWestLng , 'northEastLat' : northEastLat , 'northEastLng' : northEastLng}),
    success: function(coordinatesMap){
        alert( coordinatesMap );
        for (var id in coordinatesMap)
        {
            if (coordinatesMap.hasOwnProperty(id))
            {
                alert(id);
                alert(coordinatesMap[id].lat);
                alert(coordinatesMap[id].lng);
            }
        }                               
    }
});

The PHP script: 

<?php

    global $wpdb;
    $sql = "SELECT user_id, lat, lng FROM coordinates WHERE lat>".$_POST["southWestLat"]." and lat<".$_POST["northEastLat"]." and lng>".$_POST["southWestLng"]." and lng<".$_POST["northEastLng"];
    $rows = $wpdb->get_results($sql, OBJECT_K);

    if (is_array($rows)) {
        echo json_encode($rows);
    } else {
        echo "failure";
    }
?>

This time alert(coordinatesMap); gives a nice array - {"177":{"user_id":"177","lat":"40.0583238","lng":"-74.4056612"},"178":{"user_id":"178","lat":"40.7143528","lng":"-74.0059731"}}
But the following alerts, which are the ones I'm actually interested in give invalid values and in an infinite loop: `0, undefined, undefined, 1, undefined, undefined, 2, etc...
Can you say what's going on?

Upvotes: 1

Views: 152

Answers (3)

aorcsik
aorcsik

Reputation: 15552

You can tell the $.ajax to expect JSON data, width: dataType: "json" in the parameters.

$.ajax({
    type: "POST",
    // ...
    dataType: "json"
});

Upvotes: 0

ArtoAle
ArtoAle

Reputation: 2977

try adding "dataType: json" to your ajax request like

$.ajax({
    type: "POST",
    url: "markers.php",
    dataType: "json",
    data: ({'southWestLat' : southWestLat , 'southWestLng' : southWestLng , 'northEastLat' : northEastLat , 'northEastLng' : northEastLng}),
    success: function(coordinatesMap){
        alert( coordinatesMap );
        for (var id in coordinatesMap)
        {
            if (coordinatesMap.hasOwnProperty(id))
            {
                alert(id);
                alert(coordinatesMap[id].lat);
                alert(coordinatesMap[id].lng);
            }
        }                               
    }
});

Upvotes: 1

Khurram Ijaz
Khurram Ijaz

Reputation: 1864

in javascript if the coordinatesMap is json encoded then all you need is to parse it using

 var obj = Jquery.parseJSON(coordinatesMap);

alert(obj.user_id);

Also it will be good to have

dataType: "json" in your AJAX call.

i hope that will solve your problem

Upvotes: 3

Related Questions