Using jQuery.AJAX() to Retrieve Sample JSON Data

Traditionally the X in AJAX has usually equated XML (eXtensive Markup Notation). In recent years, JSON (JavaScript Object Notation) has taken over in many cases due to its overall efficiency and ease of use. In general, JSON is a much less verbose syntax, which has gained a lot of popularity in modern JavaScript frameworks. Part of this popularity can be attributed to the fact that JSON data can be parsed quicker and because it’s less verbose, less bandwidth is needed to transmit it back and forth. In this overview we will look at how easy it is to get up and running consuming JSON data using the popular jQuery library.

I recently published an updated article on retrieving sample JSON data using JavaScript natively. See Using JavaScript Fetch API to Retrieve sample JSON data for more details.

Out of the box, jQuery comes standard with a number of Ajax related functions that can be used to request, send and manipulate JSON data. A full list of these functions can be found in the jQuery documentation. In the examples that follow, we will be using the $.ajax function.

Step 1 – Writing the JSON File

In our first step, we need to create a basic json file that will contain records of information to display on the web page. In this example I am going to simply include a list of five training and reading resources for JavaScript:

  • You Don’t know JS – Book Series (Kyle Simpson): https://github.com/getify/You-Dont-Know-JS
  • Shaping Up with Angular.JS (Code School): https://www.codeschool.com/courses/shaping-up-with-angular-js
  • HTML/JS: Making webpages interactive with jQuery (Khan Academy): https://www.khanacademy.org/computing/computer-programming/html-js-jquery
  • JQuery AJAX (W3 Schools): http://www.w3schools.com/jquery/jquery_ajax_intro.asp
  • JQuery API Documentation (jQuery): https://api.jquery.com/

You will note each entry includes a name, provider (or author) and the URL to the resource. Next we need to place the above information into a properly formatted JSON text file. Normally JSON will be provided via a service or API call, however in this example we are simply going to create our own and include three fields for name, provider, and URL.

In order to ensure our JSON is valid, it is always a good idea to run it through the free JSON Lint service. Save your json file as resources.json.

Step 2 – Creating the JavaScript file to handle our JSON

Now that we have our JSON file created, we will need to write some JavaScript in order to parse it correctly on our web page. Thankfully jQuery has a number of helpful libraries that make the AJAX call to our JSON file relatively straight forward. The code that follows demonstrates use of jQuery.Ajax(). Save your file as script.js.

In the above code, we are using the standard document.ready function to wrap our code inside so that nothing executes until the page is ready. An event click function follows that targets the #retrieve-resources id, which we will add to a button on our HTML document. Within this function is the heart of our code, the jQuery.Ajax call. In our example we are only using type, url and success attributes. Type defines whether we are expecting a get or post response, the url points to our JSON file. In this case url is a relative path, we would normally define an absolute link to a given service that would provide a JSON response. We are not using the data attribute, which is commonly used to provide data sent to the server via the previously stated ‘get’ response. Since this example provides a static JSON implementation, data is not needed, however normally this would be required when interacting with a service. The success attribute contains the ‘result’ variable, in this case our JSON data. For a better example of using the data attribute with form data, see this parse.js example which defines form_data username and password variables.

You might also like:
Introduction to Drupal 8 Theming

After we have retrieved our data from the JSON file, we can simply use a basic for loop to iterate over its contents and then place into an HTML string that will later be rendered as a table in this example on our web page. Additionally I have added a table class here as our HTML file will use the Bootstrap framework for nicer styling of our finished page.

Step 3 Creating our HTML Page

Finally we are ready to bring everything together in our basic HTML page. The code follows. Save your file as index.html.

Our above html simply used the free Bootstrap CDN for styling and setups up our display-resources section with a link and id for retrieve-resources. The retrieve-resources id will trigger the click event in our JavaScript code, which will in turn replace the placeholder content inside our display-resources div with content from our JSON file.

See the Pen jQuery AJAX JSON for a demo using the above code. (Note in this codepen demo I am using the myjson.com service to serve resources.json)

This is a relatively short and basic demo of bringing in some JSON data into an HTML file. Be sure to checkout the excellent Pluralsight jQuery Path, which goes into more depth with both jQuery in general and covers topics including jQuery.getJSON and jQuery.Ajax. Also for more information, refer to the jQuery.Ajax API documentation over at jQuery.

Image Credits: Photo by Alexandru G. STAVRICĂ on Unsplash.

More Similar Posts

8
Leave a Reply

avatar
6 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
PetRoushannina sheikhxMike Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Demiurgen
Guest
Demiurgen

I’ve pasted the above code in 3 separate files calling them index.html, resources.js and resources.json. All I get when I press the button is a bunch of Undefined in the table.

Why?

Flash
Guest
Flash

He’s left out “dataType: ‘json’, in the $.ajax call. Adding that solves the issue.

Mike
Guest
Mike

I’m hitting my head against the wall on this one. When I initially built my app the below script was working. Then for whatever reason it stopped. Possibly the called json file isn’t fully loading before the script continues on. Any suggestions?

$(document).ready(function() {

var displayUsers = $(‘#stage’);

displayUsers.text(‘Retreiving users…’);

$.ajax({
type : “GET”,
dataType: “json”,
url : “users.json”,
success : function(result) {
console.log(result);
var output = “IDNameHighFivesExcluded”;
for (var i in result) {
output += “” + result[i].id + “” + result[i].name + “” + result[i].reward + “” + result[i].excluded + “”;
}
output += “”;

displayUsers.html(output);
$(“table”).addClass(“table”);
}
});
});

x
Guest
x

Clear browser cache;

nina sheikh
Guest
nina sheikh

how to access session through json in bootstrap

Roushan
Guest
Roushan

its just awesome….explanation of code…i loved that…

Pet
Guest
Pet

How can get image and show image on page ? Please help me…

Menu
Share via
Copy link