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 Guide
Last 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
onLoadpreselected (leave it this way)
- Select the most recent version of
- Type the following code into the HTML panel
[gist id=4684780 file=gistfile1.html]
[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
jQueryobject. It’s just a lot easier to type
jQuerysince 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.
$('#link')invokes the jQuery selector function, which in this case is a wrapper for
- 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.
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.