current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 2 down vote favorite

i am new to Json and Jquery.

Today i made this little code but its not working. I guess i wrote it right, but i know there is some little mistake somewhere. can you please help me to figure it out?

    <!doctype html>
    <html lang="en">
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>

    <script>

    $(document).ready(function () {

    $(":button").click(function(){

     var add = $("#destination").val();

    $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address= + add   +&sensor=false", function (data) {
        var output = "<ul>";


            output += "<li>"+ results.geometry.location.lat + " " + results.geometry.location.lng  + "</li>";
            output += "</ul>";

        document.getElementById("placeholder").innerHTML = output;
    });
    });
});
    </script>
    <body>

    <input type="text"  id="destination" /><button type="button">Search</button><br>
    <div id="placeholder"> </div>
</body>

</html>
share|improve this question
    
Your getJSON function takes a callback with data as an argument and uses result in the function – axelcdv Aug 4 '13 at 7:32
up vote 2 down vote accepted

Fixed. Note that results is an array.

<script>

$(document).ready(function () {

$(":button").click(function(){

 var add = $("#destination").val();

$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address= + add   +&sensor=false", function (data) {
    var output = "<ul>";


        output += "<li>"+ data.results[0].geometry.location.lat + " " + data.results[0].geometry.location.lng  + "</li>";
        output += "</ul>";

    document.getElementById("placeholder").innerHTML = output;
});
});

}); 

<input type="text"  id="destination" /><button type="button">Search</button><br>
<div id="placeholder"> </div>

share|improve this answer
    
yea , it works....i am afraid that i always do mistake while considering arrays in Json..it confuses me...yesterday, i made a similar mistake.....what i understand is i must analyse the correct array ..otherwise, i would access an undefined element. thank you – user609306 Aug 4 '13 at 7:45
up vote 0 down vote

I suppose that there's a mistake in URL. It should probably be:

"http://maps.googleapis.com/maps/api/geocode/json?address="+add+"&sensor=false"

because add is a variable defined earlier.

Other then that you should also do (since you are using jQuery):

$("#placeholder").html(output);

instead of

document.getElementById("placeholder").innerHTML = output;

And finally (as noted by @pixelcdv) you probably want

$.getJSON(..., function (results) {

because you are using results later, not data.

share|improve this answer
up vote 0 down vote

Your jquery selector doesn't need a colon, since you're referring to an element name

$("button")

As mentioned by freakish, when creating your url string, you need to close quotes before using "+" to concatenate strings.

You figured out that you're getting an array. Cool.

I made a fiddle if you want to have a look. Creating your json request and inspecting it carefully in a browser (Chrome renders json nicely) helps a lot.

my solution on jsfiddle

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.