jQuery/Json - icon keeps coming up "undefined"

  • 1
  • Problem
  • Updated 6 years ago
I'm getting my current temperature reading just fine, but when I try to display the current weather icon for my chosen location, it comes up "undefined," whether I try "icon_url" or roll my own using "icon" (my desired effect). Anyone know what I'm doing wrong? Am I calling to parse the JSON incorrectly?

Here's my JS:
jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/e763b...",
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
var icon = parsed_json['icon_url'];
$("[span class=\'temp\']"+ temp_f +"°[/span]" + "[img src=\'"+icon+"\']").appendTo("#time");
}
});
});

Any help at all would be GREATLY appreciated.

(EDIT: Changed tags to brackets instead of LT/GT because it was wonking up my code.)
Photo of Toddd

Toddd

  • 2 Posts
  • 0 Reply Likes
  • groan.

Posted 6 years ago

  • 1
Photo of afelicioni

afelicioni

  • 227 Posts
  • 43 Reply Likes
Just created a working version with this



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT" lang="it-IT">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$.ajax({
url : 'http://api.wunderground.com/api/e763b38b8627cdaa/geolookup/conditions/q/MN/Saint_Paul.json',
dataType : 'jsonp',
success : function(parsed_json) {alert(parsed_json);
var location = parsed_json['location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
var icon = parsed_json['current_observation']['icon_url'];
$('<span class="temp">'+ temp_f +'°</span>' + '<img src="'+icon+'">').appendTo($('#time'));
}
});
});
//]]>
</script>
<div id="time">zzz</div>
</body>
</html>