CODEWITHSUNDEEP
javascriptjqueryhtmljson
Sidhant Sood
Sidhant Sood

Reputation: 19

Using a JSON script in HTML and show data

Here is the Link to JSON. http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json

This JSON file give data about weather

And I want to show this data, given by the above link into my HTML file. I am using JSON for the first time. So I need help linking this JSON file into my HTML document.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>

<body>

<div class="wrapper">
<span id="temp"></span>
<span id="high"></span>
<span id="low"></span>
<span id="windspeed"></span>
<span id="description"></span>
<span id="city"></span>
<span id="iconorimage"></span>
<span id="time"></span>
<span id="any thing else"></span>
</div>
</body>
</html>

I am ok, If I can show only temperature, city, weather icon [rain,sunny], a text description about weather, high/low, wind speed and time.

Upvotes: 0

Views: 1817

Answers (5)

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

Try this, It may help you

jsFiddle for the same https://jsfiddle.net/sd0zc43j/3/

Using below ajax call

$.ajax({
  dataType: "json",
  url:"//api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json",
  success: function(data){       
   $('#city').html("City : " + data["current_observation"]["display_location"]["city"]);
   $('#high').html("High Fahrenheit: " + data["forecast"]["simpleforecast"]["forecastday"][0]["high"]["fahrenheit"] + " & Celsius: " + data["forecast"]["simpleforecast"]["forecastday"][0]["high"]["celsius"]);
   $('#low').html("Low Fahrenheit: " + data["forecast"]["simpleforecast"]["forecastday"][0]["low"]["fahrenheit"] + " & Celsius: " + data["forecast"]["simpleforecast"]["forecastday"][0]["low"]["celsius"]);
   $('#temp').html("Tempearature : " + data["current_observation"]["temperature_string"]);
   $('#windspeed').html("Wind Speed : " + data["current_observation"]["wind_string"]);
   $('#description').html("Description : " + data["current_observation"]["icon"]);
   // $('#iconorimage').html("Icon URL : " + data["current_observation"]["icon_url"]);
   $('#img').attr("src",data["current_observation"]["icon_url"]);
  }
});

Upvotes: 1

Hassan Imam
Hassan Imam

Reputation: 22524

You can access json object similar to the way one access the object property in javascript.

$.ajax({
  dataType: "json",
  url:"//api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json",
  success: function(data){
    $('#city').text("City : " + data["current_observation"]["display_location"]["city"]);
    $('#high').text("High : " + "");//Insert data for high here
    $('#low').text("Low : " +""); //Insert data for low here
    $('#temp').text("Tempearature : " + data["current_observation"]["temperature_string"]);
    $('#description').text("Description : " + data["current_observation"]["icon"]);
    $('<img />').attr('src',data["current_observation"]["icon_url"]).appendTo($("#iconorimage"));
  $('#windspeed').text('WindSpeed : ' + data["current_observation"]["wind_kph"]);
  $('#time').text('Time : ' + data["current_observation"]["observation_time"]);
  }
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<span id="temp"></span><br/>
<span id="high"></span><br/>
<span id="low"></span><br/>
<span id="windspeed"></span><br/>
<span id="description"></span><br/>
<span id="city"></span><br/>
<span id="iconorimage"></span><br/>
<span id="time"></span><br/>
<span id="any thing else"></span><br/>
</div>
</body>
</html>

Upvotes: 1

Jaydeep Mor
Jaydeep Mor

Reputation: 1703

You can use Ajax for load data.

See example,

function getJson(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(JSON.parse(this.responseText));
        }
    };
    xhttp.open("GET", "http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", true);
    xhttp.send();
}
getJson();

It will return JSON decoded data.

Upvotes: 1

Pratik Thube
Pratik Thube

Reputation: 134

you can send ajax request to this url

    $.ajax({url: "http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", success: function(result){
            var data=JSON.Parse(result);
//and then you can access each of the property of json object for example
            data.current_observation.observation_location.city;

//but yes you might need to loop through to access like periods in forecast 
        }});

let me know if i am directing you in the correct direction? That is what you want? please let me know if you need further clarification. Thanks

Upvotes: 0

user8158793
user8158793

Reputation: 1

I don't mean to be patronizing but I think the word you're looking for is parse.

Start by parsing something simpler: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

It will help boost your confidence and you'll be glad you took the scenic route as opposed to jumping head first.

Upvotes: 0

Related Questions