Recently I was given a task to consume an rest based API from using and open Open Weather Ractive.js HTML5’s Fetch API The sample takes the city name as input and shows the corresponding weather information below it. app here Get the OpenWeather API keys for FREE!!! In order to get the JSON data from OpenWeather’s REST API, the first thing we need to do is get their . The API can be called by simply passing in this app id as query parameter. That’s it! free API key Setting the UI container Create an HTML5 element to be used as the front of the app. In our case, it’s . div#container Implement responsiveness using Bootstrap Just for implementing the responsiveness, we’ve included the . The classes takes care of responsiveness itself. Bootstrap reference .row .col-md-6 .col-sm-12 Set the Ractive template After adding , we’ve made sure that the code in the fiddle will be Ractive-aware. ractive’s link The template is in the script tag. Note that we’ve set the ’s type attribute to ‘text/ractive’ - though it can be just about anything except ‘text/ ’. We can load a template in many ways. For convenience, we’ll include it in a script tag so that we don’t need to mess around with AJAX or multiline strings. script javascript The curly braces e.g. are holding the data set inside the ractive function with e.g. ractive.set('location', JSON.stringify(data.name) + ', ' + JSON.stringify(data.sys.country)); Set the ractive context The constructor function will be used to set the Ractive context. The parameters with their description are: Ractive : the element to which the front end will be rendered el : the Ractive template template : the data for the front end data Catching events Ractive events looks a little different than pure events, e.g. on-click. They’re catched in a samilar sense as that of . HTML jQuery Fire the fetch request Prepare the fetch request using the constructor function and fire it using . Request fetch(request) Use localStorage to maintain recent search history The city input is stored in the localStorage instance as an array and displayed as the of on click of each is the weather fetching request recap-ed. li ul See the here. whole code Sources: Fetch API OpenWeather Map Ractive My blog

Fetch

Mozilla

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Using Ractive.js and HTML5 Fetch API to consume REST API

Too Long; Didn't Read

Companies Mentioned

Zameer Ansari

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using Ractive.js and HTML5 Fetch API to consume REST API

Too Long; Didn't Read

Companies Mentioned

Zameer Ansari

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES