how to parse json data in html page

Question

how to parse json data,i need to display each and every data inside a div element. I am using world weather online api service to access weather data

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="in"></input>
    <input type="hidden" id="keys" value="api"></input>
    <input type="hidden" value="json" id="format"></input>
    <button id="go">Search</button>
   
    <script>
        $(document).ready(function(){
            $("#go").click(function(){
                var apikey = $("#keys").val();
                var q = $("#in").val();
                var format = $("#format").val();

                jQuery.ajax({
                    url: 'http://api.openweathermap.org/data/2.5/weather?key=' + apikey + '&q=' + q + '&format=' + format,
                    success: function(response) {
                        var obj = JSON.parse(response);
                        console.log(obj);
                    },
                });
            });
        });
    </script>
</body>
</html>

Example output for berlin:

http://api.openweathermap.org/data/2.5/weather?key=api&q=berlin&format=json

{"coord":{"lon":13.41,"lat":52.52},"sys":{"message":0.0826,"country":"DE","sunrise":1433386009,"sunset":1433445756},"weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01d"}],"base":"stations","main":{"temp":290.628,"temp_min":290.628,"temp_max":290.628,"pressure":1037.43,"sea_level":1043.19,"grnd_level":1037.43,"humidity":81},"wind":{"speed":2.42,"deg":314.504},"clouds":{"all":0},"dt":1433424243,"id":2950159,"name":"Berlin","cod":200}

Try console.log(response) to see what that's returning and share it here, your issue isn't helped by the ajax call and people won't be able to help you from this code snippet, we'll need to know what you are trying to actually parse. — Brian
– Brian, Commented Jun 4, 2015 at 13:22
all i need is to extract the temperature value from json and dispaly it in a div(div not created in above code) — l12v6
– l12v6, Commented May 29, 2016 at 15:06

Imesha Sudasingha · Accepted Answer · 2015-06-04 13:23:33Z

1

Here, JSON.parse(response) will return an array. You can access the elements in the array either by keys or the indexes.

For example, obj[0] is the '0'th element in the array(or the response text)'

and

obj.some_attribute_name will access the element by the key.

answered Jun 4, 2015 at 13:23

Imesha Sudasingha

3,5801 gold badge29 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

how to parse json data in html page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related