analizar la imagen de json

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

Este es un archivo .json para obtener las condiciones climáticas en Cedar Rapids, IA. En este archivo json hay una variable que da la condición del ícono del clima. Quiero ver poner esta imagen en html usando ID.

<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>

preguntado el 31 de diciembre de 12 a las 16:12

5 Respuestas

Como última línea de su script, agregue:

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

Respondido el 31 de diciembre de 12 a las 16:12

Simplemente cree una etiqueta img que tenga el atributo src correcto.

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

Demostración: http://jsfiddle.net/dAz2p/

Respondido el 31 de diciembre de 12 a las 16:12

Coloque un elemento de imagen en la página (digamos con id Image1), luego:

   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);
     }

Respondido el 31 de diciembre de 12 a las 16:12

Agregue una etiqueta de imagen que tenga el atributo correcto.

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

Compruébelo usted mismo: http://jsfiddle.net/dAz2p/

Respondido el 31 de diciembre de 12 a las 16:12

Solo necesitas asignar wicon de las personas acusadas injustamente llamadas src propiedad de su imagen de marcador de posición

Edit: Código, según lo solicitado.

En primer lugar, coloque una imagen de marcador de posición donde desee mostrar el icono final:

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

Luego, al asignar el texto, asigne también el src:

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

Respondido el 31 de diciembre de 12 a las 16:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.