How To Use jQuery to GET a User Story in JSON Format from the VersionOne REST Data API and Render it as HTML

Developing Custom VersionOne Apps 101 Series GuideLast time, in How To Update a User Story with the VersionOne REST Data API in JSFiddle with jQuery, JSON, HTTP POST, and 20 Lines of Code, you used jQuery.ajax's to send an HTTP POST request and change a story by sending JSON data to the VersionOne REST Data API.

In this article, you will

• Use the JSFiddle online editor
• Employ the sel parameter when querying the VersionOne REST Data API to limit which attributes get returned
• Use jQuery's special $() selector function to select HTML DOM elements
• Apply the jQuery css and fadeIn functions for smooth transitions

What you’ll need

• Google Chrome. While it should work, I have not tested this in other browsers, so if you run into any snags, please let me know in the comments

Fire up a new JSFiddle

• Open a brand new window or tab in Chrome and navigate to http://www.JSFiddle.net
• From the left side, under Choose Framework. It should have onLoad preselected (leave it this way)
• Select the most recent version of jQuery
• Type the following code into the HTML panel:

[gist id=4684780 file=gistfile1.html]

• In the JavaScript pane, add the this:

[gist id=4684780 file=gistfile2.js]

• And, for good measure, add this to the CSS panel:

[gist id=4684780 file=gistfile3.css]

• Run it! You should see a basic DIV with some CSS colors wrapping around our pretty JSON data result.

Try live JSFiddle

Understand the jQuery functions

We're going to explain a lot more about this code in a later, full/depth article, but here are some highlights for now:

• $ is a shortcut for the jQuery object. It's just a lot easier to type $ than jQuery since it gets used so often.
• The code $.ajax(...).done(...).fail(...) tells jQuery to try to execute an HTTP request using ajax, and sets up a done function and a fail function // it does this because the ajax HTTP requests are asynchronous and thus do not wait to finish before the rest of your sequential script code executes.
• The $('#link') invokes the jQuery selector function, which in this case is a wrapper for document.getElementById
• The text and html functions change the element's inner text and html respectively.
• And, the css function sets css style rules and applies them immediately on the matched element.

We'll cover jQuery in more depth later in the series, but you can read the jQuery documentation for lots of great information.

Next up

Now we are going to put everything, and I mean everything, we have studied so far together with one tutorial: How To Build a Barebones User Story Editor in JSFiddle with jQuery, JSON, and the VersionOne REST Data API. But, don't worry, after you do that, we'll refactor it to reduce the amount of code and make it even better by using some other open source JavaScript libraries. ;/)