Skip to main content
Enterprise Agile Planning icon with arrows

This post is from the CollabNet VersionOne blog and has not been updated since the original publish date.

Last Updated Feb 07, 2013 — Enterprise Agile Planning expert

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

Enterprise Agile Planning
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
  • 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. ;/)

More from the Blog

View more Government Cloud
Apr 12, 2022 Government Cloud receives FedRAMP Authorization through sponsorship from the United States Department of Veterans Affairs

Enterprise Agile Planning
Flagship Agility solutions can effectively scale agile deve ...
Read More
Nov 22, 2021

What are the qualities of highly effective agile teams?

Enterprise Agile Planning
A team is the core unit of productivity in an agile organization. Wher ...
Read More
Nov 15, 2021

How an open-first attitude revolutionized government tech development

Enterprise Agile Planning
Public perception of government is often that it is slow-moving, reluc ...
Read More
cross functional
Nov 08, 2021

6 best practices for building resilient cross-functional teams

Enterprise Agile Planning
Agile frameworks prize the quality of resilience within every facet of ...
Read More
Contact Us