How to use jQuery .getJSON() Method to perform AJAX work

How to use jQuery .getJSON() Method to perform AJAX work

The jQuery getJSON Method (.getJSON()) is an AJAX method that is used to fetch JSON data using HTTP GET request.

jQuery getJSON Syntax

$(selector).getJSON(url,data,success(data,status,xhr))
Parameter Description
url Required.
The URL to send the request to.
data Optional.
The data to be sent to the server
success(result,status,xhr) Optional.
The callback function to run when the request is successful.
  • result – contains the data returned from the server.
  • status – the request status that can be – “success”, “notmodified”, “error”, “timeout”, or “parsererror”
  • xhr – the XMLHttpRequest object
You can also use .done() & .fail() deferred objects with .getJSON()
$.getJSON({
    url: "file.json"
}).done(function (result, status, xhr) {
    alert(result)
}).fail(function (xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
});

The .done() will be called when the AJAX request completes while .fail() will be called when the AJAX request fails.

jQuery also has a .load() method for making AJAX calls. If you don’t know it then kindly read jQuery Load Complete Guide for Beginners to Experts – Examples & Codes

jQuery getJSON – Fetching JSON file

I have a json file named product.json.

[
  {
    "Product": "Mini Skirt size 38",
    "color": "Brown",
    "Price": "$40.77"
  },
  {
    "Product": "Women Pant size 39",
    "color": "Black",
    "Price": "$21.45"
  },
  {
    "Product": "Men Coat size 47",
    "color": "Pink",
    "Price": "$101.50"
  }
]

Now with .getJSON() method I will show the file’s content in HTML format and inside a div element.

<div id="jsonData"></div>
 
$.getJSON({
    url: "product.json",
    success: function (result, status, xhr) {
        var table = $("<table><tr><th>Product</th><th>Color</th><th>Price</th></tr>");
        var tr;
        for (var i = 0; i < result.length; i++) {
            tr = $("<tr>");
            tr.append("<td>" + result[i].Product + "</td>");
            tr.append("<td>" + result[i].color + "</td>");
            tr.append("<td>" + result[i].Price + "</td>");
            tr.append("</tr>");
            table.append(tr);
        }
        table.append("</table>");
        $("#jsonData").html(table);
    }
});
fetch json

jQuery getJSON – Fetching images from Flickr API

Here I will show how to fetch images from flickr API.

<div id="flickrData"></div>
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
 
$.getJSON(flickerAPI, {
    tags: "nicole kidman",
    tagmode: "any",
    format: "json"
}).done(function (result, status, xhr) {
    $.each(result.items, function (i, item) {
        $("<img>").attr("src", item.media.m).appendTo("#flickrData");
        if (i === 5) {
            return false;
        }
    });
}).fail(function (xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}); 

I have passed the optional data parameters (tags, tagmode, format) to the jQuery getJSON method.

I have searched for ‘nicole kidman’ and once the API send me the results in JSON then I am looping through them using jQuery Each Method

.

flickr api

You can also download the full source codes:

DOWNLOAD

SHARE THIS ARTICLE

  • linkedin
  • reddit
yogihosting

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate