Question

How to bind json value to script and need a output in html. I try to get the data and image of weather, but no solution. Help me

here is an sample of jquery

$(function(){
   $.getJSON("http://query.yahooapis.com/v1/public/yql", {
      q: "select * from json where url=\"http://api.wunderground.com/api/91bbc8aab3ab1f34/geolookup/conditions/q/IN/Chennai.json\"",
      format: "json"
}, function(data) {
   var $content = $("#content")
   if (data.query.results) {
     $content.text(JSON.stringify(data.query.results));
   } else {
      $content.text('no such code: ' + code);
   }

 });
});​

code in html

<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

the content is div and icon is an image tag

<div id="content">
<img id="weather_icon" />

when i run the application it takes the data alone . i need the weather images and data from the api.
Please help

Answer 1

Try this, was able to display the weather icon.. I modified the jQuery to display the image by setting the url into the image tag. Just dig for the data you want to be displayed in the content div.

        $(function(){
        $.getJSON("http://query.yahooapis.com/v1/public/yql", {
            q: "select * from json where url=\"http://api.wunderground.com/api/91bbc8aab3ab1f34/geolookup/conditions/q/IN/Chennai.json\"",
            format: "json"
            }, 
            function(data) {
                // Dig for the data from the JSON object. 
                //  The image URL can be found at: query > results > json > current_location > icon_url
                $('#weather_icon').attr('src', data.query.results.json.current_observation.icon_url);
                //  Do the same for any data you want displayed for the content to be displayed..
            });
    });