jQuery getJSON() example

jQuery getJSON() function is used to load JSON-encoded data from the server using a GET HTTP request.

Description

Load JSON-encoded data from the server using a GET HTTP request.

Syntax

jQuery.getJSON( url [, data ] [, success ] )
  • url - A string containing the URL to which the request is sent.
  • data - A plain object or string that is sent to the server with the request.
  • success - A callback function that is executed if the request succeeds.
This is a shorthand Ajax function, which is equivalent to:
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

Example

Loads the four most recent pictures of Mount Rainier from the Flickr JSONP API.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery.getJSON demo</title>
    <style>
        img {
            height: 100px;
            float: left;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <div id="images"></div>

    <script>
        (function() {
            var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
            $.getJSON(flickerAPI, {
                    tags: "mount rainier",
                    tagmode: "any",
                    format: "json"
                })
                .done(function(data) {
                    $.each(data.items, function(i, item) {
                        $("<img>").attr("src", item.media.m).appendTo("#images");
                        if (i === 3) {
                            return false;
                        }
                    });
                });
        })();
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References

Comments