Getting Json Response from an API using javascript/jquery

Question

I am newbie with javascript and jquery and i am facing a problem in json parsing with jquery. I am using open weather simplest API for fetching the weather information but nothing is happening. If i hardcode the json in any file or in my script it works fine but as soon as i use URL of API it stop showing result.

here is my complete code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    function myFunction() {
        var path = "api.openweathermap.org/data/2.5/weather?q=Lahore,pk";
        $(document).ready(function () {
            $("button").click(function () {
                $.getJSON(path, function (data) {
                    $.each(result, function (i, field) {
                        $("div").append(field + " ");
                    });
                });
            });
        });
    }
</script>
</head>
<body>

<button onclick="myFunction()">Get JSON data</button>

<div></div>

</body>
</html>

You are looping through result. Where is it's definition ? — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Apr 17, 2015 at 7:12
Where did you get the variable result? Did you mean it as data? — Alvin Magalona
– Alvin Magalona, Commented Apr 17, 2015 at 7:12
Missing http:// at the start of path. But does that website support CORS or JSONP? You should check your console for errors. Very important when debugging Javascript — CodingIntrigue
– CodingIntrigue, Commented Apr 17, 2015 at 7:12
@A1rPun . no i told that for Json format output print method.. example: alert(JSON.stringify(data)); data is his response — Angu
– Angu, Commented Apr 17, 2015 at 7:17

Dustin Hoffner · Accepted Answer · 2015-04-17 07:35:35Z

1

You did multiple mistakes. Here a working fiddle:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
</head>
<body>

<button id="myButton">Get JSON data</button>

<div id="mydiv"></div>

</body>
<script>
$("#myButton").click(function(){
    var path = "http://api.openweathermap.org/data/2.5/weather?q=Lahore,pk";
    $.getJSON(path, function (data) {
        $.each(data, function (i, field) {
            var textNode = document.createTextNode(i+ " " +JSON.stringify(field));
            $("#mydiv").append(textNode);
        });
    });
});
</script>

Example

Write a comment if you need more information.

edited Apr 17, 2015 at 7:35

answered Apr 17, 2015 at 7:28

Dustin Hoffner

2,1651 gold badge16 silver badges15 bronze badges

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

5 Comments

Bilal Amjad Over a year ago

Yes its working! Thanks a lot for the help and yes i know i have done multiple mistakes as i am newbie.

Dustin Hoffner Over a year ago

Seeing you are new. If my answer was helpful for you, please consider marking it as accepted.

Bilal Amjad Over a year ago

It is fetching the complete response perfectly but how can i get specific data like from the result if i want to know the temperature only how can i get that? Right now i am using this approach using your code: '$.getJSON(path, function (data) { $.each(data, function (i, field) { var textNode = document.createTextNode(i+ " " +JSON.stringify(field)); $("#mydiv").append(textNode); obj = JSON.parse(textNode); document.getElementById("mydiv").innerHTML = obj.main.temp;'

Dustin Hoffner Over a year ago

If you want to access fields in your response object do it like this: $.getJSON(path, function (data) { document.getElementById("mydiv").innerHTML = data.main.temp; });

Bilal Amjad Over a year ago

Perfect!! Thanks a lot! Now let me see how can i vote and mark your answer as answered :)

Prashant G · Accepted Answer · 2015-04-17 07:43:33Z

1

Loop through the JSON result, ie. data in your case, :

Working Code:

<button>Get JSON data</button>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    var path = "http://api.openweathermap.org/data/2.5/weather?q=Lahore,pk";
        $(document).ready(function () {
            $("button").click(function () {
                $.getJSON(path, function (data) {
                    $.each(data, function (i, field) {
                        $("div").append(JSON.stringify(field)); // parse the object according to your need.
                    });
                });
            });
        });
</script>

edited Apr 17, 2015 at 7:43

answered Apr 17, 2015 at 7:14

Prashant G

4,9303 gold badges38 silver badges47 bronze badges

1 Comment

CodingIntrigue Over a year ago

The openweathermap doesn't seem to support HTTPS, so your relative protocol would break here.

Collectives™ on Stack Overflow

Getting Json Response from an API using javascript/jquery

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related