Error al "parsear" JSON de forma síncrona

Ketchuz · 3 Diciembre 2013, 03:24 AM

Hola compañeros. Un saludo.

Estoy en un proyecto personal en el que necesito detectar la ubicación del usuario usando la API Geolocation de HTML5 y, usando jQuery, descargar y mostrar los datos del clima de la ubicación detectada con la API de Wunderground. Uso la geolocalización de HTML5 en vez de la de Wundergound debido a que la de Wunderground es muy imprecisa. El problema es que al hacer la petición de AJAX la URL del archivo JSON no se construye correctamente y se descarga un archivo incorrecto.

¿Podrían, por favor, ayudarme a corregir mi código? No me refiero a que lo hagan por mí, me refiero a que me den sugerencias de cómo debe estar construido y como hacerlo funcionar. Gracias de antemano por su ayuda.

El código es el siguiente:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Clima</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>
	</head>
<body>
	<div id="contenedor">
		<div class="tarjeta" id="clima">
			<span class="ttitulo">El clima</span>
			<div id="climacnt">
				<p id="wlocation" class="trjtenc">Detectando ubicación...</p>
				<p id="consultado">Cargando datos del clima...</p>
				<img id="imgpronostico" src="images/loading.gif" class="tarjetaimg" alt="Ícono del clima actual">
				<div id="detallew">
					<p id="pronostico"></p>
					<p id="viento"></p>
					<p id="humedad"></p>
				</div>
			</div>
		</div>
	</div> 
<script type="text/javascript">
jQuery(document).ready(function($) {
			var KEY = "a701d0d2314662c6";
			var urlpath, wlat, wlong;
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(getLocation);
			}
			else {
			urlpath = "geolookup/conditions/lang:SP/q/autoip.json";
			}
			function getLocation(position) {
				wlat = position.coords.latitude;
				wlong = position.coords.longitude;
				urlpath = "geolookup/lang:SP/q/" + wlat + "," + wlong ;
				$('#consultado').html(urlpath); //Comprobación de que la URL contiene las coordenadas
			}
			if (KEY != "a701d0d2314662c6")
			{
				$.ajax({
					url: "http://api.wunderground.com/api/" + KEY + "/" + urlpath + ".json",
					async: false,
					dataType: "jsonp",
					timeout: 4000,
					success: function(parsed_json) {
						var localz = parsed_json['current_observation']['display_location']['full'].toString();
						var temp_c = parsed_json['current_observation']['temp_c'].toString();
						var viento = parsed_json['current_observation']['wind_kph'].toString();
						var lluvia = parsed_json['current_observation']['precip_today_metric'].toString();
						var humedw = parsed_json['current_observation']['relative_humidity'].toString();
						var iconow = parsed_json['current_observation']['icon'].toString();
						var consultw = parsed_json['current_observation']['observation_time'].toString();
				
						$('#wlocation').html(localz);
						$('#imgpronostico').attr('src', "images/icons/" + iconow + ".png");
						$('#pronostico').html("<strong>Temperatura:</strong> " + temp_c.replace(".",",") + " <sup>º C</sup>");
						$('#humedad').html("<strong>Humedad:</strong> " + humedw);
						$('#viento').html("<strong>Viento:</strong> " + viento + " Km/h");
						$('#consultado').html(consultw.replace("Last Updated on","<strong>Última actualización: </strong>") + " url: " + urlpath);
						$('#wlocation').css("font-weight","bold");
			},
			error: function(request, status, err) {
				if (status == "timeout") {
				    $('#wlocation').html("Localización no determinada");
				 	$('#consultado').html("La información no se pudo obtener. Revise su conexión y reintente más tarde.");
					$('#imgpronostico').attr('src', "http://t3.gstatic.com/images?q=tbn:ANd9GcQzl8g-SPI029d0EUZqW_oFPS8HqQ1yVMTBRZcLzulc51WIEIPn");
				} else {
				     $('#wlocation').html("Error: " + request + status + err);
				}
			}
		});
	}
	else
		document.writeln("Error fatal al obtener el clima");
});
</script>
</body>
</html>

Más información de la API de Wunderground: http://espanol.wunderground.com/weather/api/d/docs?d=data/geolookup

EFEX · 3 Diciembre 2013, 14:47 PM

Cual es la url que genera? Los navegadores poseen un debugger para js, ctrl+shift+i.

Esta es la peticion que genera...

Citarhttp://api.wunderground.com/api/a701d0d2314662c6/undefined.json

Es por que no espera a que se obtenga primero la localizacion y luego generar la consulta ajax. Para esto se utilizan los callback y precisamente esta funcion los tiene.

Código (javascript) [Seleccionar]


var urlpath, wlat, wlong;
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
		//successCallback
		function(position){
			wlat = position.coords.latitude;
			wlong = position.coords.longitude;
			urlpath = "geolookup/lang:SP/q/" + wlat + "," + wlong ;
			$('#consultado').html(urlpath); 

			// generar consulta ajax
			// luego de haber obtenido la posicion
			
		//errorCallback
		},function(error){
			alert('Error:'+error.code+':'+error.message);
		},{timeout:5000} // esperar 5s y luego llamar la funcion
	)
}else {
	urlpath = "geolookup/conditions/lang:SP/q/autoip.json";
}

Te dejo un excelente sitio para leer mas: http://fortuito.us/diveintohtml5/geolocation.html

Ketchuz · 3 Diciembre 2013, 21:23 PM

Gracias por tu ayuda. Probaré el código y después regreso para informarles cómo me fue. De nuevo, muchas gracias.

Ketchuz · 4 Diciembre 2013, 03:15 AM

Gracias por tu ayuda. Modifiqué el código aunque usé el mismo principio que me indicaste.

Test Foro de elhacker.net SMF 2.1

Error al "parsear" JSON de forma síncrona

Ketchuz

EFEX

Ketchuz

Ketchuz