elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Error al "parsear" JSON de forma síncrona
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Error al "parsear" JSON de forma síncrona  (Leído 2,554 veces)
Ketchuz

Desconectado Desconectado

Mensajes: 31



Ver Perfil
Error al "parsear" JSON de forma síncrona
« en: 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
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Clima</title>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
  6. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>
  7. </head>
  8. <div id="contenedor">
  9. <div class="tarjeta" id="clima">
  10. <span class="ttitulo">El clima</span>
  11. <div id="climacnt">
  12. <p id="wlocation" class="trjtenc">Detectando ubicación...</p>
  13. <p id="consultado">Cargando datos del clima...</p>
  14. <img id="imgpronostico" src="images/loading.gif" class="tarjetaimg" alt="Ícono del clima actual">
  15. <div id="detallew">
  16. <p id="pronostico"></p>
  17. <p id="viento"></p>
  18. <p id="humedad"></p>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. <script type="text/javascript">
  24. jQuery(document).ready(function($) {
  25. var KEY = "a701d0d2314662c6";
  26. var urlpath, wlat, wlong;
  27. if (navigator.geolocation) {
  28. navigator.geolocation.getCurrentPosition(getLocation);
  29. }
  30. else {
  31. urlpath = "geolookup/conditions/lang:SP/q/autoip.json";
  32. }
  33. function getLocation(position) {
  34. wlat = position.coords.latitude;
  35. wlong = position.coords.longitude;
  36. urlpath = "geolookup/lang:SP/q/" + wlat + "," + wlong ;
  37. $('#consultado').html(urlpath); //Comprobación de que la URL contiene las coordenadas
  38. }
  39. if (KEY != "a701d0d2314662c6")
  40. {
  41. $.ajax({
  42. url: "http://api.wunderground.com/api/" + KEY + "/" + urlpath + ".json",
  43. async: false,
  44. dataType: "jsonp",
  45. timeout: 4000,
  46. success: function(parsed_json) {
  47. var localz = parsed_json['current_observation']['display_location']['full'].toString();
  48. var temp_c = parsed_json['current_observation']['temp_c'].toString();
  49. var viento = parsed_json['current_observation']['wind_kph'].toString();
  50. var lluvia = parsed_json['current_observation']['precip_today_metric'].toString();
  51. var humedw = parsed_json['current_observation']['relative_humidity'].toString();
  52. var iconow = parsed_json['current_observation']['icon'].toString();
  53. var consultw = parsed_json['current_observation']['observation_time'].toString();
  54.  
  55. $('#wlocation').html(localz);
  56. $('#imgpronostico').attr('src', "images/icons/" + iconow + ".png");
  57. $('#pronostico').html("<strong>Temperatura:</strong> " + temp_c.replace(".",",") + " <sup>º C</sup>");
  58. $('#humedad').html("<strong>Humedad:</strong> " + humedw);
  59. $('#viento').html("<strong>Viento:</strong> " + viento + " Km/h");
  60. $('#consultado').html(consultw.replace("Last Updated on","<strong>Última actualización: </strong>") + " url: " + urlpath);
  61. $('#wlocation').css("font-weight","bold");
  62. },
  63. error: function(request, status, err) {
  64. if (status == "timeout") {
  65.    $('#wlocation').html("Localización no determinada");
  66. $('#consultado').html("La información no se pudo obtener. Revise su conexión y reintente más tarde.");
  67. $('#imgpronostico').attr('src', "http://t3.gstatic.com/images?q=tbn:ANd9GcQzl8g-SPI029d0EUZqW_oFPS8HqQ1yVMTBRZcLzulc51WIEIPn");
  68. } else {
  69.     $('#wlocation').html("Error: " + request + status + err);
  70. }
  71. }
  72. });
  73. }
  74. else
  75. document.writeln("Error fatal al obtener el clima");
  76. });
  77. </body>
  78. </html>
  79.  

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


En línea

No robes, el gobierno odia la competencia
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Error al "parsear" JSON de forma síncrona
« Respuesta #1 en: 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...
Citar

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
  1. var urlpath, wlat, wlong;
  2. if (navigator.geolocation) {
  3. navigator.geolocation.getCurrentPosition(
  4. //successCallback
  5. function(position){
  6. wlat = position.coords.latitude;
  7. wlong = position.coords.longitude;
  8. urlpath = "geolookup/lang:SP/q/" + wlat + "," + wlong ;
  9. $('#consultado').html(urlpath);
  10.  
  11. // generar consulta ajax
  12. // luego de haber obtenido la posicion
  13.  
  14. //errorCallback
  15. },function(error){
  16. alert('Error:'+error.code+':'+error.message);
  17. },{timeout:5000} // esperar 5s y luego llamar la funcion
  18. )
  19. }else {
  20. urlpath = "geolookup/conditions/lang:SP/q/autoip.json";
  21. }
  22.  

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


« Última modificación: 3 Diciembre 2013, 14:49 pm por EFEX » En línea

Ketchuz

Desconectado Desconectado

Mensajes: 31



Ver Perfil
Re: Error al "parsear" JSON de forma síncrona
« Respuesta #2 en: 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.
En línea

No robes, el gobierno odia la competencia
Ketchuz

Desconectado Desconectado

Mensajes: 31



Ver Perfil
Re: Error al "parsear" JSON de forma síncrona
« Respuesta #3 en: 4 Diciembre 2013, 03:15 am »

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

No robes, el gobierno odia la competencia
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines