Get data $.getJSON() and output to HTML table

Published on: August 5, 2018

Welcome to the 14th Easy jQuery Tutorial, part of EasyProgramming.net. Let's build on our last tutorial and learn about the $.getJSON() method to use in our AJAX calls. 

As I did last time, I would recommend checking out the AJAX videos I did in the Easy JavaScript series. 

Here's a quick example of what a $.getJSON() method implementation looks like. 

 $.getJSON(url,data, successCallbacK)
 .done(function(){})
 .fail(function(){})
 .always(function(){});

The url is the url that you are getting information from. It MUST output JSON, otherwise you will get an error. 

The data is what you are sending in your request to the server. It can be one thing or multiple items in JSON format. It is optional.

The successCallback function is a method that you can use to capture returned data and do something with it. It is also optional. In this tutorial, we will output this data into a neat HTML table using the $.each() loop.

The dataType does not exist in the $.getJSON() method as it did for $.get() because we are explicitly stating what kind of data we are expecting in the method itself. This means that we cannot get any other kind of data. 

You can also chain the done, fail, and always methods to the end. 

You can use the following Easy Programming dummy JSON file for practice: https://www.easyprogramming.net/heroes.json

I hope you enjoyed this tutorial! Please feel free to ask questions below or just leave your comments. 

To fork the fiddle and follow along: https://jsfiddle.net/9gyr5knj/

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!

Resources:



Comments: