Updated April 1, 2023
Introduction to jQuery getJSON()
JSON stands for JavaScript Object Notation. JSON is very popular for the way to exchange data and by using this we can display, style, and modify the data. getJSON () method in JQuery is used to load or to get the JSON encoded data. In some of the cases when we request the server it will return the JSON string. The resulting string will be available to the callback function of the getJSON () method. The getJSON () method will be using the GET HTTP request. In simple words, getJSON() method is used for getting the JSON-formatted data.
Syntax and Parameters
The getJSON () method is used to get the JSON data. It returns the XML HTTP Request object. The getJSON () method syntax in the JQuery.
Syntax:
$(selector).getJSON(url[, data][, function])Parameters:
It takes three parameters. The details of the parameters are:
- URL: It is of string type and it is mandatory to give or send the URL to the getJSON () method. In this, we will specify the url to which it has to send the request for.
- Data: It is of string type or the plain object and it is an optional parameter. In this, the request it will be sent to the server.
- Function: It is an optional parameter. It is a function that will get executed if the request is successful. It again consists of three additional parameters. They are data, status, and xhr.
- Data: It is of the plain object type. The data which is returned from the server will be here.
- Status: It is of string type. It contains the text status. It may be success, error, notmodified, timeout, or parsererror.
- Xhr: It is of jqXHR type. It contains the XML HTTP Request. It has jqXHR.done() it indicates the success. The jqXHR.fail() it indicates error and it has jqXHR.always().
How to use jQuery getJSON()?
- Before we call the getJSON () method the URL which we need to send to the method for that we need to create the json file.
- We need to first install npm.
- To install npm we need to execute this command in the command prompt : npm install –global json-server
- After executing the above command we have to create and name the file and save the file as filename.json. (filename can be anything according to your requirement.)
- After saving the file execute the following command in the command prompt:
- Json-server –watch filename.json
- Now if we will type this URL in the browser http://localhost:3000/filename. It will open the file and show the data which we have written in the file.
- By following the above procedure I have created a file and named it is as db.json.
- The content present in the db.json file is as follows:
Code:
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "ABC"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "Raju"
}
}- After typing the URL in the browser as http://localhost:3000/profile (here I am executing only profile from the db.json file so the URL will be as shown above) the output will be as shown below.
- Now we are using this URL in our program. How we are using this URL in the getJSON () method and how we are getting data will be shown in the below examples.
Examples of jQuery getJSON()
Following are the example are given below:
Example #1
This is a simple example of the getJSON () method. In this example, we can observe how the getJSON () method will work.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example of the getJSON() method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("http://localhost:3000/profile", function(event){
$.each(event, function(i, value){
$("div").html(value);
});
});
});
});
</script>
</head>
<body>
<div>
Example for the getJSON() method
</div>
<button>getJSON data</button>
</body>
</html>Output:
- In the above program we can observe that we have passed the URL to the getJSON () it will be redirected to the file which we have created and gets the data from the file.
- In this example before clicking on the button getJSON data the output will be as shown below.
- After clicking on the button getJSON data the output will be as shown below. By clicking on the button we can observe that the content in the db.json- profile is displayed.
Example #2
This is another example of the getJSON () method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example of the getJSON() method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("http://localhost:3000/profile", function(event){
$.each(event, function(i, value){
$("div").append(value + " ");
});
});
});
});
</script>
</head>
<body>
<div>
</div>
<button>getJSON data</button>
</body>
</html>Output:
- This example is the same as the above example here we have used append instead of the html because that by clicking on the button the data is getting repeated.
- In this example before clicking on the button getJSON data the output is as shown below.
- After clicking on the button getJSON data the output will be as shown below.
We can observe that the name is getting repeated by clicking the getJSON data button.
Example #3
This is an example of the getJSON() method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example of the getJSON() method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(event){
$.getJSON("http://localhost:3000/posts", function(posts) {
$("#getJsonDiv").html('<p> Title: ' + posts.Title + '</p>');
$("#getJsonDiv").append('<p>Author : ' + posts.author+ '</p>');
});
});
});
</script>
</head>
<body>
<div id="getJsonDiv">
Example for the getJSON () method
</div>
<button>getJSON data</button>
</body>
</html>Output:
By executing the http://localhost:3000/posts in the browser we can observe the output will be shown as below.
- We can see in the above code we have passed this URL to the getJSON () method. So it will get the data displays the content in the output.
- Before clicking on the button getJSON data. The output will be displayed as shown below.
- After clicking on the button getJSON data the output will be as shown below.
These are some of the example programs which will help you to understand the getJSON() method.
Recommended Articles
This is a guide to jQuery getJSON(). Here we also discuss the introduction and how to use jQuery getJSON()? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
