CODEWITHSUNDEEP
jqueryhtmljson
Europeangoldfinch
Europeangoldfinch

Reputation: 67

parse image from json

http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/IA/Cedar_Rapids.json

This is .json file to get the weather condition in Cedar Rapids, IA. In this json file there is variable that give the weather icon condition. I want to see put this image in html using ID's.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1 id='meteo'></h1>
<script type="text/javascript">
jQuery(document).ready(function($) {
    var state = 'CA';
    var city = 'San_Francisco';
    var URL = 'http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/' + state + '/' + city + '.json';
    $.ajax({ 
        url : URL, 
        dataType : "jsonp", 
        success : function(parsed_json) { 
            var location = parsed_json['location']['city']; 
            var temp = parsed_json['current_observation']['temperature_string'];
            var wicon = parsed_json['current_observation']['icon_url'];
            $("#meteo").text(temp); 
        }
    });
}); 
</script>
</body>
what can i do
</html>

Upvotes: 0

Views: 1826

Answers (5)

Eugen Rieck
Eugen Rieck

Reputation: 65334

You just need to assign wicon to the src property of your placeholder image

Edit: Code, as requested.

First of all, put a placeholder image where you want to display the final icon:

...
<img id='meteo_icon' src='meteo_loading.png'>
<h1 id='meteo'></h1>
...

Then, when assigning the text, also assign the src:

...
$("#meteo").text(temp);
$("#meteo_icon").attr("src", wicon);
...

Upvotes: 0

JeremyL
JeremyL

Reputation: 347

Please add an image tag that with the right attr.

$( '<img>' ).attr( 'src', wicon ).appendTo( '#meteo' );

Check out yourself: http://jsfiddle.net/dAz2p/

Upvotes: 0

Steve Wellens
Steve Wellens

Reputation: 20640

Put an image element on the page (say with id Image1), then:

   success: function (parsed_json)
    {
        var location = parsed_json['location']['city'];
        var temp = parsed_json['current_observation']['temperature_string'];
        var wicon = parsed_json['current_observation']['icon_url'];
        $("#meteo").text(temp);

        $("#Image1").attr("src", wicon);
     }

Upvotes: 0

Codo
Codo

Reputation: 78985

As the last line of your script, add:

$("#meteo").append('<img src="' + wicon + '"/>");

Upvotes: 1

JJJ
JJJ

Reputation: 33153

Just create an img tag that has the correct src attribute.

$( '<img>' ).attr( 'src', wicon ).appendTo( '#meteo' );

Demo: http://jsfiddle.net/dAz2p/

Upvotes: 1

Related Questions