basic Javascript jquery json Html

Question

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>

Your getJSON function takes a callback with data as an argument and uses result in the function — axelcdv
– axelcdv, Commented Aug 4, 2013 at 7:32

Tutan Ramen · Accepted Answer · 2013-08-04 07:35:59Z

2

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>

answered Aug 4, 2013 at 7:35

Tutan Ramen

1,2621 gold badge9 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user609306 Over a year ago

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

freakish · Accepted Answer · 2013-08-04 07:32:28Z

1

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.

answered Aug 4, 2013 at 7:32

freakish

57k12 gold badges141 silver badges181 bronze badges

Comments

o3fingers · Accepted Answer · 2013-08-04 07:53:00Z

1

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

answered Aug 4, 2013 at 7:53

o3fingers

312 bronze badges

Collectives™ on Stack Overflow

basic Javascript jquery json Html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related