← Back to jQuery Course | Chapter 9: AJAX Basics | Lesson 5 of 7

Parsing JSON with getJSON()

The getJSON method requests JSON data and parses it automatically. The returned value is ready to use as a JavaScript object.

In this page:

  1. What is getJSON()?
  2. Read JSON Properties
  3. Work with JSON Arrays
  4. Handle JSON Errors
  5. Small JSON Project
Syntax
javascript 
$.getJSON(url, data, function (json) {
  // handle json
});

What is getJSON()?

$.getJSON() is a shorthand AJAX method built specifically for requesting a URL and automatically parsing the JSON response, so you get back a ready-to-use JavaScript object instead of a raw string. This saves calling JSON.parse() yourself on the response.

Example: What is getJSON()?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.getJSON("data.php", function(data) {
        $("#output").text(JSON.stringify(data));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

Read JSON Properties

JSON data usually contains named properties and values, and you access them with normal dot notation once getJSON() has parsed the response, like data.name or data.price. The structure of the object mirrors whatever shape the server's JSON response defined.

Example: Read JSON Properties

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.getJSON("data.php", function(data) {
        $("#output").text(String(data.name));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

Work with JSON Arrays

A JSON response can be an array of items rather than a single object, and each() is a natural way to visit every item in that array and act on it individually, such as building a row in a table for each one.

Example: Work with JSON Arrays

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="list"></ul>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").empty();
      const data = [{name: "Apple"}, {name: "Banana"}];
      $.each(data, function(i, item) {
        $("#list").append("<li>" + item.name + "</li>");
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Handle JSON Errors

A JSON request can fail because of network problems or because the server returns something that isn't valid JSON, and chaining .fail() lets you handle that case instead of letting the error pass silently. This is especially important since malformed JSON would otherwise throw a parsing error you'd need to catch separately.

Example: Handle JSON Errors

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.getJSON("data.php").done(function(data) {
        $("#output").append($("<div>").text(JSON.stringify(data)));
      }).fail(function() {
        $("#output").append($("<div>").text("Failed to load or parse JSON"));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

Small JSON Project

getJSON is useful for dashboards, lists, profiles, and other pages that receive structured data from an API and need to render it directly into the DOM. It's the most direct route from a JSON API endpoint to visible content on the page.

Example: Small JSON Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="profile"></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.getJSON("data.php", function(data) {
        $("#profile").text(data.name);
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

HTTP POST with post() · Loading Scripts with getScript() · HTTP GET with get() · Serializing Form Data

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Calling JSON.parse(data) on the result of $.getJSON(), when jQuery has already parsed it into an object and this throws an error.
  2. Reading a property that does not exist, such as data.Name instead of data.name, because JSON keys are case-sensitive and the result is undefined.
  3. Sending invalid JSON from the server, such as single-quoted strings or a trailing comma, which makes $.getJSON() fail silently and never call the success callback.
🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson HTTP POST with post() Next Lesson → Loading Scripts with getScript()

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.