Local Weather project - the API returns different JSON

JavaScript
#1

Tell us what’s happening:
Weirdest thing - so I have a working local weather app. Wanted to build it with Web Components, simply to see if I could, and it works quite nicely. But the strangest thing is that the API returns a different JSON structure for the same URL (the lat & lon remain the same, but the returned JSON object is different). Also, there is no icon in the returned json’s weather[0].icon.

I’m baffled. Anybody got an idea?

Your code so far

The relevant section…

      const weatherAPIUrl = "https://fcc-weather-api.glitch.me/api/current?";
      
      // Convenience functions
      // Take the location object and pull out its latitude and longitude, and return a URL
      const updateWeatherApi = ({lat, long})=>`${weatherAPIUrl}lon=${long}&lat=${lat}`;
      
      // We'll get temps in C. Convenience function to convert them to F.
      const tempInF = (temp) => (temp*9/5+32).toFixed(1);
      
      // The workhorse. This gets the current location, then calls the API to get the weather.
      const getWeather = ()=>{
        // Call to get the current location.
        navigator.geolocation.getCurrentPosition( (location) => {
          // Convert our complex object to a simpler one, just for convenience sake.
          const locationObj = {lat: location.coords.latitude.toFixed(2), long: location.coords.longitude.toFixed(2)};
          const tempUrl = updateWeatherApi(locationObj);
          
          console.log(tempUrl);
          
          fetch(tempUrl)
            .then(response=>response.json())
            .then(jsonObj=>{
            console.log(jsonObj);
              weatherObject = JSON.parse(JSON.stringify(jsonObj));
              updateWeatherDisplay();
             });
        }, error=>{console.error(JSON.stringify(error)); })
      }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.

Challenge: Show the Local Weather

Link to the challenge:

#2

The FCC API does not always return as expected. I would use the actual API that it uses.

https://api.openweathermap.org

This has been on my todo list for a very long time. I need to fix the current FCC weather API so that it returns the icon always. The issue is the FCC version does not account for all the weather conditions and just does not send back an icon if it has not accounted for it.

You can take a look at the FCC API here and look at the imLinks.json file to see where the icons come from.

1 Like
#3

@snowmonkey For testing purposes, do you have a longitude and latitude where you are seeing the different JSONs returned. I want to test something in a fix I am working on.

Thanks.

1 Like
#4

Well, my app is running here: https://surveys-and-stuff-parenttobias.codeanyapp.com/weatherWidget/index.html

I tried changing the decimal precision with a toFixed(), just in case it was the really long decimal that was throwing it, but when I refresh, about one time in five it tells me I’m in Shianxou, China rather than Sturbridge, MA.

Let me see if I can get a similar result here (home, vs lib - a difference of some thirteen miles). If I do, I’ll DM you the lat/long.

Edit: Friends testing this in Europe and Africa also get the same result - every few calls, it will return a completely different location. The same location for all of us, though:

So I know I need to make the error checking for temp and feels_like a little more robust. I’ll be working on it a little later, also looking into going directly to the openWeathermap API.

Update: After setting up with the openWeatherMaps API, that hiccup isn’t happening. A few oddities with the API, though - took a minute to realize temps are coming in Kelvin by default…

1 Like
#5