WP plugin development using jQuery | XML | OpenWeather API #2

jQuery ajax() for fetching weather XML data

AJAX (Asynchrous JavaScript and XML) is technology used to send and retrieve data  using browser's XMLHttpRequest object between browser and server without need of refreshing the page.

jQuery is a JavaScript library which simplifies some operation like DOM manipulation, event handling and AJAX calls which makes web development much pleasant experience.

To obtain current weather information for Glasgow I used jQuery ajax() method.

$.ajax(options) - loads remote page using http request, with couple of options like url: A string containing URL where the request is sent. I used q=Glasgow to get data for Glasgow, mode=xml to receive data in XML format and units=metric to have temperatures in Celcius instead of Kelvin units.

dataType option is a string defining the type of data expected back from server which is xml

success: callback function that is executed when the request is successful with returned data passed as a argument.

Quick network check in developer tools shows that we successfully created the request with status code 200, and received xml data. Which i logged to console for further examination.

error: callback function which is executed when the request is not successful. In this case simply return alert information for the user that something went wrong.

I deliberately changed my application key to get  the bad response which results with 401 - unauthorized status code and execution error function.

Other jQuery methods used to present XML data.

XML (Extensible Markup Language) is very similar to HTML which also contain opening and closing tags. Everything is inside top (root) tag - <weatherdata>, and rest of the tags are nested inside where <forecast> tag contain child elements <time> where weather information for 3 hrs period of time are held. Most of the data is stored inside tags as  attributes (name-value pair) and jQuery will be used to get that data and present it in more attractive manner.

To get required data I'm using find() method  which can traverse down and select descendant elements with pathname starting from the root tag and digging down <weatherdata> --> <forecast> --> <time> chained with each() method which loops through all <time> tags. I used if statement to return only 8 "records" which will cover 24 hrs of forecast.

Then I created separate variables to store required information. Data is obtained from tags and attributes using again find() with addition of attr()  method - witch returns values of the attributes. 

 To format time and date to more readable output I used toLocaleDateString(locales, options) JavaScript method which converts Date object using locale settings and options to set required formatting of date/time strings.

All that variables are injected interpolated inside a html object which return a "card" style information with image and current data for 3-hrs period. I used JavaScript feature of string interpolation that we can easily pass data inside the string. The string must be inside `` (tick) characters instead of single/double quotes and variable can be passed using ${variable name}. I think this method is less confusing that string concatenation where we need to keep eye on type of quotes used which can be  very confusing when long strings or html syntax used.

And final result in the browser - nicely presented XML weather forecast data.