Weather Underground API con Ajax

Se supone que debo crear una aplicación con la API de Weather Underground utilizando Ajax y JSON, pero realmente no había mucha dirección en cuanto a cómo hacerlo. Si pudiera ver una versión completa del código, entonces tengo una idea de cómo debería comenzar. Así es como aprendo. Sé un poco sobre JSON, pero no estoy seguro de cuál es mi próximo paso aquí.

Este es mi código:

    Weather API App    

Your Awesome Forecast Page

Current Conditions

Your Hourly 1-day forecast

Your 7-day forecast

@charset "UTF-8"; /* CSS Document */ body{ font-family: Arial, Helvetica, sans-serif; background-color:darkblue; } #container{ width: 90%; margin: 0 auto; } /*Header ------------------------------*/ header { border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px; background-color: rgba(255, 255, 255, 0.75); margin-bottom: 30px; } nav { padding: 0; margin: 0; } nav ul { padding: 0; margin: 0; padding-left: 10px; } nav li { display: inline-block; padding-left: 10px; } li a { text-decoration: none; color: black; font-weight: bold; } li a:hover { color: white; } .logo { width: 300px; margin: 0; display: inline-block; } h1 { display: inline-block; margin: 0; padding: 2%; }

main.js

 $.ajax({ url : "http://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json", dataType : "json", success : function(url) { var location = url['location']['city']; var temp_f = url['current_observation']['temp_f']; $(".conditions").html("Current temperature in " + location + " is: " + temp_f+"ºF"); } }); 

Aquí hay un comienzo para ponerte en marcha. Su función AJAX devuelve datos JSON (abra su consola y eche un vistazo). La forma correcta de recuperar cualquier clave / valor en particular de los datos JSON es como se muestra a continuación para temp_f. Luego, como ya lo ha hecho, cree una cadena a partir de los diversos elementos que extrajo de JSON y escríbala en el elemento HTML seleccionado:

 $.ajax({ url: "http://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json", dataType: "json", success: function(url) { console.log(url); var location = 'Columbus'; var temp_f = url.current_observation.temp_f; $(".conditions").html("Current temperature in " + location + " is: " + temp_f + "ºF"); } }); 
  

Estoy completamente de acuerdo con la respuesta de @ sideroxylon, esto es solo como una nota al margen.

Si solo está esperando recuperar solo datos JSON, valdría la pena explorar para usar la función $.getJSON también, si no quiere preocuparse por el tipo de datos que está usando en $.ajax , vea mi jquery Fragmento de abajo.


Retazo

 $(document).ready(function() { $.getJSON("https://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json", function(response) { var location = response['current_observation']['display_location']['city']; var temp_f = response['current_observation']['temp_f']; $(".conditions").html("Current temperature in " + location + " is: " + temp_f + "ºF"); console.log(response); }); });