Open In App

How to make a JSON call using jQuery ?

Last Updated : 26 Jul, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Use the getJSON() function in jQuery to load JSON data. The getJSON() function uses a GET HTTP request to retrieve JSON-encoded data from the server. In this article, we will learn about the jQuery getJSON() function and its implementation through examples.

Syntax:

$(selector).getJSON(url, data, success(data, status, xhr))

Parameters: This method accepts three arguments, which are listed below:

  • url: The argument URL is necessary. It is used to indicate the URL as a string to which the request is sent.
  • data: It is a parameter that is optional and indicates the data that will be transmitted to the server.
  • callback: It is also an optional argument that is executed if the request is successful.

Return Value: It gives back an XMLHttpRequest object.

Example 1: In this example, we use the getJSON() function to retrieve JSON data from an external JSON file. There is an external JSON file entitled emp.json that holds an employee’s information. 

The URL and the callback function are two arguments of the getJSON() method that we are utilizing. It fetches JSON-encoded data from the server using a GET HTTP request. The URL parameter has been set to emp.json. The callback function has two parameters data and status. The first argument contains the contents of the requested page, while the second contains the request status. The data load from the server is visible in the output, and the request status is a success.

To retrieve the data from the external JSON file, we have to click the given button.

emp.json:

{
    "name": "Vishal Kumar", 
    "age" : "22", 
    "gender": "Male",
    "salary": 56000 
}

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <style>
        body {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
  
        #output {
            background-color: #ecf721;
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $("#btn").click(function (event) {
                $.getJSON("emp.json", function (emp) {
                    $("#output").html("<p> Name: " 
                        + emp.name + "</p>");
                    $("#output").append("<p>Age : " 
                        + emp.age + "</p>");
                    $("#output").append("<p>Gender: " 
                        + emp.gender + "</p>");
                    $("#output").append("<p>Salary: " 
                        + emp.salary + "</p>");
                });
            });
        });
    </script>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
  
    <p>
        Click on the button to load 
        data from emp.json file
    </p>
  
    <div id="output"></div>
  
    <input type="button" id="btn" 
        value="Get Employee Data" />
</body>
  
</html>


Output:

 

Example 2: The following example uses the getJSON() method to load the random quotes from Formastic API

Whenever the user clicks on the given button a request to the API server is made. On successfully receiving data from the server it goes to the done interface which contains a callback function having one parameter called quote. This parameter holds the data of the requested page.

If there is an error in receiving the data, then it goes to the fail callback function having one parameter called err. This parameter holds the error message returned by a server which you can log and try to solve.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  
    <style>
        body {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
  
        #quote {
            background-color: #25bf1a;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
      
    <p>Click on the button to call API</p>
      
    <div id="quote"></div>
      
    <input type="button" id="btn" value="Call API" />
  
    <script>
        $(document).ready(function () {
            var forismaticAPI =
"http:.../api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
            $("#btn").click(function () {
                $.getJSON(forismaticAPI)
                    .done(function (quote) {
                        $("#quote").html("<p> quoteText: " 
                            + quote.quoteText + "</p>");
                        $("#quote").append("<p>quoteAuthor : "
                            + quote.quoteAuthor + "</p>"
                        );
                        $("#quote").append("<p>senderName: " 
                            + quote.senderName + "</p>");
                        $("#quote").append("<p>senderLink: " 
                            + quote.senderLink + "</p>");
                        $("#quote").append("<p>quoteLink: " 
                            + quote.quoteLink + "</p>");
                    })
                    .fail(function (err) {
                        console.log(err);
                    });
            });
        });
    </script>
</body>
  
</html>


Output:

 



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads