Using a JSON script in HTML and show data

Question

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.

see i just dont know a single thing about how to grab this data from html, once i became able to access this data from my html file, rest i will do myself — Sidhant Sood
– Sidhant Sood, Commented Jul 7, 2017 at 6:51

Hassan Imam · Accepted Answer · 2017-07-07 07:30:25Z

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>

Jaydeep Mor · Accepted Answer · 2017-07-07 07:12:14Z

1

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.

answered Jul 7, 2017 at 7:12

Jaydeep Mor

1,7233 gold badges22 silver badges42 bronze badges

2 Comments

Sidhant Sood Over a year ago

can you plz show me an example what it will return and how to put that reurned data in javascript variable.

Jaydeep Mor Over a year ago

Check your console.

Trimantra Software Solution · Accepted Answer · 2017-07-07 07:36:38Z

1

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

edited Jul 7, 2017 at 7:36

answered Jul 7, 2017 at 7:31

Trimantra Software Solution

3,3273 gold badges28 silver badges45 bronze badges

2 Comments

Trimantra Software Solution Over a year ago

Glad it helps :)

Trimantra Software Solution Over a year ago

Please Marked as answer for future references

user8158793 · Accepted Answer · 2017-07-07 06:50:41Z

0

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.

answered Jul 7, 2017 at 6:50

user8158793

1

Comments

Pratik Thube · Accepted Answer · 2017-07-07 07:02:24Z

0

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

answered Jul 7, 2017 at 7:02

Pratik Thube

1442 silver badges9 bronze badges

1 Comment

Pratik Thube Over a year ago

you can use json object 'data' which we have parsed from received result to access needed properties. if get any difficulty in getting forecast property data let me know.

Collectives™ on Stack Overflow

Using a JSON script in HTML and show data

5 Answers 5

Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related