Help getting fetch() to work in pure js on the weather app challenge [SOLVED]

1

I’ve been trying for days on a row now to properly make an API request and insert JSON data into the HTML in pure Javascript using fetch() in order to build the weather app, without success. I’ve seen a few jQuery solutions around, but I’d like to use this opportunity to learn more about http, headers and promises — hence the extra mile.

I successfully got geolocation to work and logged the API url to the console. However, when the call to fetch() is added, the following code generates a strange behavior in Codepen and when run natively in Chrome — the browser says the HTML file was not found or deleted. All of it works perfectly on JSFiddle though:

var error = document.getElementById('error');
var location = document.getElementById('location');
var description = document.getElementById('description');
var temperature = document.getElementById('temperature');

function getWeather() {
  var fetchData = function(posit) {
    var latitude = posit.coords.latitude;
    var longitude = posit.coords.longitude;
    var url = '* weather api with key *'+latitude+','+longitude;

    var request = new Request(url);

    fetch(request).then(function(request) {
      return request.json();
    }).then(function(json) {
      location.innerHTML = json.location.region;
      description.innerHTML = json.current.text;
      temperature.innerHTML = json.current.temp_c;
    });
  };

  var errorMsg = function() {
    error.innerHTML = 'Your current browser does not support geolocation.';
  };

  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };

  navigator.geolocation.getCurrentPosition(fetchData, errorMsg, options);
};

getWeather();

Can anyone give me a clue of what I’m getting wrong?

2

Can you post a link to your CodePen? Also, if you want to use fetch, you should use the polyfill as not all browsers are on board. Add this as an external library in CodePen:

https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js

1 Like
3

Sure! This is the CodePen: http://codepen.io/rdazvd/pen/woVjWG

I didn’t bother with polyfills at this point because I’m doing most of my development and testing in Chrome, which has pretty solid support for fetch() according to Can I Use: http://caniuse.com/#search=fetch. Just added it to the pen, though.

Also worth mentioning that I’m using the Apixu API, that serves its requests as https:// (https://www.apixu.com/).

Here is the JSFiddle, where the same code works: https://jsfiddle.net/rdazvd/4asmp8r4/7/

4

Did you mean to post a non-secure link to CodePen? Geolocation won’t work with just http. I doubt this is related to your problem, though, since you said you got geolocation to work. Indeed, it works for me as well, but CodePen is freaking out about a broken link. What’s really weird about this is that I’m able to read and edit your code just fine.

Screenshot 2017-01-05 16.22.46.png1666×695 108 KB

I’ve had CodePen break irreparably before. It’s rear, but bound to happen at some point. I would try starting a new pen, copy your code in, and then nuke the old one from orbit. I can’t see anything wrong with your code, so if that doesn’t work… CodePen support?

EDIT

Nevermind! I’m a big, old dumbface. :sob: Wrap the whole thing in an onload handler

window.onload = function() {
  // ALL OF YUR CODE GOEZ HERE
}
1 Like
5

Works! We still have to make sure that we’re running a secure connection, of course, unlike I did when posting. Thanks!

1 Like
6

Thanks for the link!