Trouble with ajax

Trouble with ajax
0.0 0

#1

Im having a hard time figuring out the ajax portion of the weather app challenge. here is my codepen https://codepen.io/qtheginger/pen/JMgeqL I can get the geolocation data, but for some reason I can’t figure out how to pass that into the api call and get the needed json data


#2

You have two issues:

#1) You have a typo on the following line:

    $ajax({    

#2) You are not correctly referencing the button with id=“location” in the line below:

$("location").html("Temperature: " + data.main.temp);

#3

I just fixed both of those typos, but I still cant get it to display the data its supposed to be receiving!
EDIT: i discovered the solution. After looking through chromes dev tools while in debug mode, I saw that jquery wasnt being linked to. I deleted the external link that i found in the quick add area of the js pens settings, then linked to jquery within my html document. It is working without issue now!


#4

You are implementing OpenWeatherMap API which tells the real time weather report on every city around the world. I personally implemented this API in jQuery AJAX method so I can guide it to you.

First you have to make .ajax() call to the API URL passing your API Key and city id and some other info (which you can find on their docs.).

Next you will get the json which contains the API response.
The json format is something like this:

{
  "coord": {
    "lon": -74.01,
    "lat": 40.71
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": -3.09,
    "pressure": 1023,
    "humidity": 53,
    "temp_min": -6,
    "temp_max": -1
  },
  "visibility": 16093,
  "wind": {
    "speed": 2.1,
    "deg": 320
  },
  "clouds": { "all": 1 },
  "dt": 1486113300,
  "sys": {
    "type": 1,
    "id": 1972,
    "message": 0.083,
    "country": "US",
    "sunrise": 1486123400,
    "sunset": 1486160222
  },
  "id": 5128581,
  "name": "New York",
  "cod": 200
}

You can then extract information from this JSON with your JavaScript code quite easily. See the below code.

$.ajax({
                type: "POST",
                url: "API URL",
                dataType: "json",
                success: function (result, status, xhr) {
                    cityname=result["name"];
                    countryname=result["sys"]["country"];
                    temperature=result["main"]["temp"];
                    humidity=result["main"]["humidity"];
                },
                error: function (xhr, status, error) {
                    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
                }
            });

Once you are able to extract this information form json then you can simply show it inside your div or table.

I want to share this very good tutorial - Implementing OpenWeatherMap API in jQuery AJAX. This tutorial also contains the full code of implementation. You will understand the codes very easily.