How to test if I'm on the right track?

How to test if I'm on the right track?
0

#1

Hey folks. I’m working on my weather app and I want to make sure that I’m on the right track.

https://codepen.io/kaydeejay/pen/LezwPe

How can I put in some dummy html to check to see if my code is pulling api data correctly?

Thanks in advance!


#2

Put it in a div and change the innerHTML.

document.getElementById(bob).innerHTML=""HUMIDTY IS "+humidity Variable

#3

Just tried putting the following into my JS code:

document.getElementById(windMPH).innerHTML=windMPH;

and the following into my HTML:

<div id=“windMPH”></div>

nothing appeared when I tried running the code. What am I missing here? Thanks for your help!


#4

The parameter in “.getElementByID” needs to be a string. Put quotes around “windMPH” in the parentheses and it should work!

document.getElementById(“windMPH”).innerHTML=windMPH;


#5

That worked, thank you! But now it just comes up as “undefined” no matter which variable I put in.


#6

Just checked your code. It’s not saying the var is undefined, it’s saying that the value inside it is undefined. If you change country manually to 3 at the top lines and run it it will output 3.


#7

You need to figure out why your gathering of the JSON data is not going into your vars


#8

I had the same trouble when I did this challenge. I’m fairly certain that it’s because your line

document.getElementById(“windMPH”).innerHTML=windMPH;

is getting called before the JSON function has loaded the data. .getJSON is asynchronous, meaning that your code goes on while it waits for the data to be pulled. You could instead put the innerHTML code inside that .getJSON function:

 $.getJSON("https://api.apixu.com/v1/current.json?key=9332ab2c8ebc4235a2c183219180501&q=" + country, function(data2) {
          tempC = data2.current.temp_c;
          tempF = data2.current.temp_f;
          humidity = data2.humidity;
          windMPH = data2.wind_mph;
          windKPH = data2.wind_kph;
          });
    
        document.getElementById("windMPH").innerHTML=country;
  });

#9

I didn’t even think you could do that. I thought it would just execute anyway and still come back undefined because JSON hasn’t responded yet.
I didn’t know the whole function could be set aside to wait like that


#10

If you have things in your code that depend on the data from the .getJSON call, you’ll need to reference the data from inside the .getJSON’s nested function. The rest of your code moves on and doesn’t wait for .getJSON to respond.


#11

Ok guys, one more question and then I have to log off and take another whack at this tomorrow. Putting the getElementById script inside the JSON worked for getting all of the data for my locations. However, once I try requesting data from my weather API, it comes up as undefined again. I have a feeling I’m not putting together the url correctly in the JSON call to the API.

$.getJSON(“https://api.apixu.com/v1/current.json?key=9332ab2c8ebc4235a2c183219180501&q=” + zip, function(data2) {
tempC = data2.current.temp_c;
tempF = data2.current.temp_f;
humidity = data2.humidity;
windMPH = data2.wind_mph;
windKPH = data2.wind_kph;
});

Right now I have it set to the URL + zip, where zip is a variable defined as data.zip (from my freegeoip api). I tried using city or town names instead of zip codes, but I figured they were being added onto the url with spaces, which I figured would make it not work. Then again, it could be a totally different problem that I haven’t thought about.

As always, any help is very much appreciated! Thanks!


#12

I just looked at your Codepen and the reason you are showing undefined for the wind is two reasons. The main reason is you need to move the following line to be inside your nested getJSON callback function:

document.getElementById("windMPH").innerHTML=windMPH;

Secondly, even if you do that, you will still get undefined, because of the following line:

windMPH = data2.wind_mph;

data2 does not have a property called wind_mph. However, data2 does have a property called current who’s value is an object containinh a property called wind_mph. Change your reference and you will see a wind metric display on your page.


#13

Tried your solution, and it worked! I was very confused at first until I took a closer look at the JSON for the weather API again, and I didn’t see that under the “condition” object there was a nested object called “current.” I saw the closing brackets for current and thought it was the closer for condition. Now it’s making much more sense. Thank you!


#14

you can use jquery btw, if you add it to your codepen project in the settings, $(“#windMPH”).html(); is much simpler to write…

wait, it’s actually added already, you use its getjson method