Working on the Free Code Camp Weather App | Tiffany R. White Blog

Working on the Free Code Camp Weather App

Reading time: 4 mins

I am working on the Free Code Camp weather app quite consistently.

Understanding the difference between $getJSON() and $ajax() to parse the JSON response from your chosen weather API is key. You can technically use $getJSON but the $ajax API call syntax is much easier to understand, though is more verbose. You can also customize how you get your response as well as other options.

Take:

[javascript] $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var url = “https://api.darksky.net/forecast//" + lat + "," + lon; $.ajax({ type: 'GET', url: url, dataType: "jsonp", success: function(data) )}; [/javascript]

This jQuery code has an $ajax() function with an object inside it. It specifies what type of ajax API call it needs, which is GET– we are retrieving information from the API, in the form of a JSON response. We are passing in the API URL which we assigned to the url variable in the self-executing anonymous function expression navigator.geolocation.getCurrentPosition(function(position). Also in the ajax call is the dataType which expects the type of data the response will give back which is most commonly jsonp, and the success callback.

This is fairly easy to grok if you are familiar with jQuery.

$.getJSON() or $ajax()?

$.getJSON(url, data, success) is how you would use it. It’s simple, not verbose, yet it is limiting.

A better $.ajax() example which showcases the complexity you can accomplish:

[javascript] $.ajax({ type: ‘GET’, url: filename, data: data, async: false, beforeSend: function (xhr) { if (xhr && xhr.overrideMimeType) { xhr.overrideMimeType(‘application/json;charset=utf-8’); } }, dataType: ‘json’, success: function (data) { //Do stuff with the JSON data } }); [/javascript]

There are a lotof parameters here. Some are asking if you want to get the results asynchronously, using an xhr response from the server, and several other types of parameters. This gives you more control, depending on the API.

I am working on the Free Code Camp weather app quite consistently.

Understanding the difference between $getJSON() and $ajax() to parse the JSON response from your chosen weather API is key. You can technically use $getJSON but the $ajax API call syntax is much easier to understand, though is more verbose. You can also customize how you get your response as well as other options.

Take:

[javascript] $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var url = “https://api.darksky.net/forecast//" + lat + "," + lon; $.ajax({ type: 'GET', url: url, dataType: "jsonp", success: function(data) )}; [/javascript]

This jQuery code has an $ajax() function with an object inside it. It specifies what type of ajax API call it needs, which is GET– we are retrieving information from the API, in the form of a JSON response. We are passing in the API URL which we assigned to the url variable in the self-executing anonymous function expression navigator.geolocation.getCurrentPosition(function(position). Also in the ajax call is the dataType which expects the type of data the response will give back which is most commonly jsonp, and the success callback.

This is fairly easy to grok if you are familiar with jQuery.

$.getJSON() or $ajax()?

$.getJSON(url, data, success) is how you would use it. It’s simple, not verbose, yet it is limiting.

A better $.ajax() example which showcases the complexity you can accomplish:

[javascript] $.ajax({ type: ‘GET’, url: filename, data: data, async: false, beforeSend: function (xhr) { if (xhr && xhr.overrideMimeType) { xhr.overrideMimeType(‘application/json;charset=utf-8’); } }, dataType: ‘json’, success: function (data) { //Do stuff with the JSON data } }); [/javascript]

There are a lotof parameters here. Some are asking if you want to get the results asynchronously, using an xhr response from the server, and several other types of parameters. This gives you more control, depending on the API.

It’s almost finished. Still need to get civic data and do some CSS Kung fu. But after that, it should be ready to go. No link– I have an API key I am using and need to keep it a secret for a bit. Once it is done I will link it up on GitHub Project Pages.


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter