How to Get JSON Data with jQuery

How to Get JSON Data with jQuery | jQuery.getJSON() Method

There are plenty of ways to load JSON-encoded data. One of the popular ways is by using ajax. But what if Ajax is not working? Is there an alternative?

If you are using jQuery, you may use getJSON() method as an alternative for ajax().

What is getJSON?

getJSON() is a method in jQuery that fetches JSON-encoded data from the server using GET HTTP request. Unlike Ajax, getJSON only accepts three parameters and return an XMLHttpRequest object once the process is a success.


jQuery.getJSON( url [, data ] [, success ] )
Code language: JavaScript (javascript)
Data type: string
Value: the URL to which the request is sent.
Data Type: object or string
Value: An object that is sent to the server with the request.
For this parameter, you can use a function to trigger once the getJSON method is a success.

getJSON can also be converted into AJAX.

If you are familiar with AJAX, this is how getJSON will look like in AJAX:

  url: url,
  data: data,
  dataType: "json",
  success: function(data) {}
Code language: JavaScript (javascript)

Since getJSON will process through GET HTTP request, all data that you will send to the server will be automatically converted into a url-encoded data and add to the URL as a query string.

For example

  url: '',
  { name: "John" }
Code language: JavaScript (javascript)

The full URL will look something like this
Code language: JavaScript (javascript)


  • Simple and easy to use
  • Understandable and easy to read


  • No speed difference from ajax
  • Unsecured especially if you’re passing sensitive data


To make getJSON work, you have to create an external JSON file and link it to the getJSON method otherwise your code will not work.

Use the following source code as your reference.


	"id": 1,
	"name": "John",
	"company": "WeeklyHow",
	"position": "Content Writer"
}Code language: JSON / JSON with Comments (json)

If you want to add more data in your json file, just follow its syntax.

"variable": "value"Code language: JavaScript (javascript)

It’s important to remember that each data ends with a comma (,) except the last data.


<!DOCTYPE html> 

	<script src=""></script> 
	<div id = "output" style = "background-color:#39B54A;"></div> 
	<input type = "button" class="getData" value = "Get Data" /> 
	<!-- Get JSON data when button is clicked --> 
	<script type = "text/javascript" language="javascript"> 
		$(document).ready(function() { 
				$.getJSON('', function(data) { 
					$('#output').html('<p> ID: ' + + '</p>'); 
					$('#output').append('<p>Name: ' + + '</p>'); 
					$('#output').append('<p> Company: ' + + '</p>'); 
					$('#output').append('<p> Role: ' + data.position + '</p>'); 
Code language: HTML, XML (xml)


The example source code above will display the following output. (Though we have added a little styling for the sake of the good display).

You may try to press the button to see the result.

Oh no! I’m empty. Please click the button.

Good job! You can now get data from JSON files.

Now, what if the data don’t exist?

What if getJSON() method failed to process?

There’s another method that you can use to check if getJSON() method fails to process and that is .fail() method.

See the following example below.

$.getJSON( "", function(data) {})
  .fail(function( jqxhr, status, error ) {
    var er = status + ", " + error;
    alert( "Request Failed: " + er );
Code language: JavaScript (javascript)

The above example will prompt an output saying that the request failed with additional information as to why the process failed.

This is a great way to double-check or to understand what’s going on with your getJSON method.


There are many ways to get data from requests. getJSON method is one of them. If you’re sending data that are sensitive, we highly encourage you to use $.ajax() instead to ensure that your data is safe from public view.

Leave a Reply