How should i format the openeweathermap api in jS

i have the code right here to retrieve the openweathermap api but do not know how to format it to work in codepen plz help

here is my pen:

this is the documentation for the openweathermap

Well, that’s definitely not how to do it. It looks like you were trying to send a json back through the ajax. But we want to receive that data.

But first of all, your html needs some fixing:

    <span id="country" class= "text-center"></span> 
    <span id="state"></span>
    <span id="city"></span>

everything should be in the body tag and all those div elements needed closing tags. Now you’ll get output. I’m not sure those span elements are needed - the ids could have been put directly on the div elements - but it works.

OK, so, you have location data, now you need to get weather. You have long and lat in there too. I always see what I get by sending it to the console. Put a console.log statement in there:

  success: function( location ) {
    console.log(location);                  // <=== add this!

so you can open up the console (ctrl-shft-j) and see exactly what you’ve got.

You need another ajax call to use this to get the weather. You want to use openweather. There are a few issues with that. First off all, you’ll need to sign up to get an api key. There are free api keys, but unfortunately if you want https (secured), then you have to pay. But codepen only does https. So I’d avoid openweather.

I might suggest darksky. You’ll have to sign up there too, but it’s free. You can call it with something like:

      url: "" + apiKey + "/" + latitude + "," + longitude,
      jsonpCallback: "callback",
      dataType: "jsonp",
      success: function( data) {

A couple of hints:

You’ll need to give those variables latitude, longitude, and secretKey the appropriate values.

This ajax call must be done inside the callback to the previous ajax call since it depends on info from it. If not, your code will start the second ajax call before the first one is finished because first a in ajax stands for “asynchronous”. This is an important concept that happens a lot in javascript.

Send things to the console with console.log as you go to make sure things are working the way you think.

Let us know if you get stuck.

Don’t get frustrated. APIs are frustrating. Even when you understand them they can be frustrating because they are all different, they often aren’t documented well, and they sometimes change. And it’s just plain complicated. But you’ll get it if you keep at it.

thanks I have been working on it for the past couple of days and still am I will tell you when I am finished

OK, let us know if you get stuck.

all that is left is to continue on this thing :

now I have no clue where to go because I (presumably) defined the variables but the problem is that my console shows that the api key is undefined ?

i got past that now it says there is an invalid request

OK, there are some problems with your code.

First of all, you get the latitude and longitude from navigator.geolocation but then call geoip-db - which also gives you lat and lon - why not just call that?

I have a hard time following your structure, but let me just explain a few basic things.

JavaScript is asynchronous, meaning it doesn’t wait for things to finish. This is extremely important when dealing with AJAX - the first A stands for asynchronous. That means that anything that requires data from that AJAX call must be in the callback function (there are other ways of dealing with this, but let’s stick with the basics.) If not, the program will finish running before getting that data and those variables will be undefined when they’re called. So, in JS you often get nested callback functions when they depend on each other. A basic layout of your program (with the HTML stuff removed) would be:

var apiKey = "c1b44b041af023ac4b9f47e438e031e6";
var lat; // define these just to 
var lon; // show asynchronicity

  url: "",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function( location ) {
    console.log("\n\n\n\nlocation object from geoip...");

    lat = location.latitude;
    lon = location.longitude;
    console.log("notice that JS gets here AFTER then last line of code");
    console.log("because the AJAX took a few seconds to get back");
    console.log("lat = " + lat + "   and lon = " + lon);

    $.ajax({ // notice that this is inside the previous AJAX call, it needs location
      url: "" + apiKey + "/" + location.latitude + "," + location.longitude,
      jsonpCallback: "callback",
      dataType: "jsonp",
      success: function( data) {
        console.log("\n\n\n\ndata object from darksky...");
    }); // ajax darksky
  } // success
});  // ajax geoip

console.log("undefined because JS reaches this code before the AJAX call gets back");
console.log("lat = " + lat + "   and lon = " + lon);

By putting all those things inside the callback functions, all the things are defined when they’re needed. If they are outside, then they are undefined. There is a pen where you can see this in action.

Let us know if any of this isn’t clear.

1 Like

thank you so much for your explanation. after a ton of procrastination on my side and a lot of console errors I finally understood what you were saying in the end I am so relieved that I got past that part of this project

1 Like

Very good explanation about nested codes. Thank you very much.

argh new issue now this time I got the API going but now I have no clue how to show the required information I looked at promises and fetch objects but I have no clue how to implement them in my code at this point

I answered this in the other thread you have going.