Failing to return what I want via ajax (Google Geocoding)

Question

I have 5 input fields, one for each day of the week. They're saved on keyup into a variable, which is working according to console.log.

<script>
    $(document).ready(function(){
        console.log("Ready!");
        $("input[type='text']").keyup(function() {
            console.log("Something changed");

            var mon = $("#mon").val();
            var tue = $("#tue").val();
            var wed = $("#wed").val();
            var thu = $("#thu").val();
            var fri = $("#fri").val();

            console.log("Monday means:" + mon);

            $.ajax({
              type: "post",
              url: "map.php",
              data: 'mon=' + mon + '&tue=' + tue + '&wed=' + wed + '&thu=' + thu + '&fri=' + fri,
              dataType: 'json',
              success: function(data){
                console.log("Your data is:" + data);
              },  
            });
        });
    });
</script>

However, I am failing to return either an "Not working" or what I'm actually after. Shouldn't "Not working" be returned if the API call within the php file failed?

// This is not returning anything
if($_POST['mon']) {
    $mon = $_POST['mon'];

    // Working fine manually entered into the web browser
    $urlMon = "https://maps.googleapis.com/maps/api/geocode/json?address=".$mon."&key=myKey123";
    $jsonMon = json_decode(file_get_contents($urlMon), true);
    $address = $jsonMon['results']['formatted_address'];

    if(isset($address)) {
        echo json_encode($address);
    } else {
        echo json_encode("Not working");
    }
}

I know that the ajax itself is working, because this is working:

// This returns the variable I sent according to the console log.
if($_POST['mon']) {
    $mon = $_POST['mon'];
    echo json_encode($mon);
}

I'm quite new at this, I'm sure I've missed something obvious/done something really wrong.

Thanks in advance

First of all, JSON is usually used to pass arrays from PHP to JS, if you are only returning strings, no need to use JSON. Secondly, your syntax to pass datas is not correct, see this post: http://stackoverflow.com/questions/6085649/ajax-multiple-data — Nicolas P., Jun 03 '16 at 12:47
Response is a `200` then and just empty? Try adding `else { echo "It's empty";}` after the last `}`. — chris85, Jun 03 '16 at 12:49
@NicolasP. Just doing monday atm, but I will encode an array of 5 days later on, but first it'd be good to have just one day working — Algernop K., Jun 03 '16 at 12:49
@chris85 Well, I don't have an error function within the ajax itself (because I didn't quite understand it tbh). The console logs nothing, anyway. — Algernop K., Jun 03 '16 at 12:51
Just for fun, try removing `dataType: 'json',` and see if you get anything. Since you're encoding just a plain string, it's possible that it's not being viewed as json. — Patrick Q, Jun 03 '16 at 12:55
@PatrickQ What does this suggest: `Your data is:
Notice: Undefined offset: 0 in C:\xampp\htdocs\kickassStuff\map.php on line 7
"Not working"`? Removed dataType. — Algernop K., Jun 03 '16 at 12:57
It suggests that you need to figure out where in that array the address you want is :) — Patrick Q, Jun 03 '16 at 12:58
@PatrickQ `https://maps.googleapis.com/maps/api/geocode/json?address=Motown` - if I want `formatted_address`, wouldn't that be `$jsonMon['results'][0]['formatted_address'];`? — Algernop K., Jun 03 '16 at 13:02
@PatrickQ Thanks, it's working for some reason now. Now I just have to figure out why it stops searches when I add a space into the box.. "Mostreet" gets me an address, but when I write "Mostreet Burma" or whichever of the many Mostreets I want the console.log of the data doesn't change — Algernop K., Jun 03 '16 at 13:18
@PatrickQ Nevermind, forgot to urlencode it. Jesus what's wrong with me today — Algernop K., Jun 03 '16 at 13:20

score 1 · Accepted Answer · answered Jun 03 '16 at 13:53

The reason why you weren't seeing anything from your console.log() call is because you were explicitly telling jQuery to expect a json result. And, even though you were calling json_encode() on your error text, it it was still really just plain text that jQuery wasn't interpreting as json. Since you told it to expect json and it wasn't getting it, the success callback wasn't happening. Remove dataType: 'json', unless you a.) know that you will always get a json response or b.) have an error callback as well.

The reason why we were hitting your error condition is because $jsonMon['results']['formatted_address'] should have been $jsonMon['results'][0]['formatted_address']. You also need to urlencode the address that you are sending to the maps API.

score 0 · Answer 2 · answered Jun 03 '16 at 13:19

I see two errors:

$address = $jsonMon['results']['formatted_address'];

Should be

$address = $jsonMon['results'][0]['formatted_address'];

to receive the first result.

Second, change

} else {
    echo json_encode("Not working");
}

to

} else {
    echo "Not working";
}

and you should be good.

sneha · Answer 3 · 2016-06-03T13:20:08.300

-2

You have to write like this

$urlMon= file_get_contents("https://maps.googleapis.com/maps/api/geocode/json?address=".$mon."&key=myKey123");
$results = json_decode($urlMon,true);
echo $results['results'][0]['formatted_address'];

edited Jun 03 '16 at 13:20

answered Jun 03 '16 at 13:08

sneha

147
3

No I don't? Took that line from another script I have which is working – Algernop K. Jun 03 '16 at 13:10
`$jsonMon = json_decode(file_get_contents($urlMon), true);` - There's nothing wrong with that part still, that is not the error here – Algernop K. Jun 03 '16 at 14:03

Failing to return what I want via ajax (Google Geocoding)

3 Answers3