CODEWITHSUNDEEP
javascriptjqueryhtmljsonapi
Patrick O
Patrick O

Reputation: 73

Grabbing Values from a JSON API Responce, putting them into webpage

Today I have a question that may seem kinda simple the the rest of you. I'm just now learning how to use APIs/JSONs and I'm a little confused. I'm trying to simply grab the temperature from this openweathermap.org API response and displaying it in an html tag.

The javascript from what I know is grabbing the temperature and setting it as a var. I'm confused why I cannot use id="" to set text inside a tag. The code below is what I have so far. I thank you for your time.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var weather;
var temp;
$(document).ready(function() {
$.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98&units=metric",
    dataType: 'jsonp',
    success: function(weather){
    var temp = weather.main.temp;
}
}); 
</script>
</head>
<body>
<p id="temp"></p>
</body>
</html>

Upvotes: 0

Views: 73

Answers (1)

Fabricator
Fabricator

Reputation: 12772

@ArunPJohny have already identified the errors: 1) missing }) and 2) use $('#temp') to get the HTML element. Also you don't need to declare weather because it is declared as an argument.

$(document).ready(function() {
  $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98&units=metric",
    dataType: 'jsonp',
    success: function(weather) {
      $('#temp').text(weather.main.temp);
    }
  });
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<p id="temp"></p>

Upvotes: 1

Related Questions