Consuming RESTful API Example Code with JavaScript, jQuery, Bootstrap

See the Pen Consuming RESTfull API by Vitaliy Merkulov (@vitworks) on CodePen.

See it full screen at http://codepen.io/vitworks/pen/LxaarL

In this example, I take the data from the weather API and display it on the page. I use JavaScript to get the data from the API, and use a combination of jQuery and Bootstrap to put data into DOM. Take a look at the js code, there are comments every step of the way so you’ll be able to see what I’ve done here.

If you’re just getting started with REST, here is a good tutorial on Consuming RESTful APIs by Geoffrey Liu. Start with plain JavaScript way first so you can learn the concept. Then you can move on to using your favorite js frameworks like AngularJS, ReactJS and etc.

Access-Control-Allow-Origin

Keep in mind, most browsers do not allow accessing APIs from different domain names. A good way around that is using CORS or if you’re in a dev environment use a chrome extension that will allow you access to a remote API. You can also use a free CORS proxy by putting crossorigin.me/ in front of your remote API url and it will magically allow you to see the remote API without restriction. (don’t use this on a production because the data is not secure)