JSON Responses

JSON Responses: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 45 of 100

JSON Responses

Setup & DOM ✓ → Events Effects AJAX → Perf & Integrate → Ship & Projects

Events Effects AJAX · 2 — Interact · ~6 min · AJAX and APIs

What is this?

JSON is the usual API body. With dataType:"json" or $.getJSON, jQuery parses into objects. Always guard missing fields before writing to the DOM with .text().

Why should you care?

QueryVerse cards break when code assumes every property exists on every payload.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <button type="button" id="load">Load user JSON</button>
  <div id="card" class="box muted">No data</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#load').on('click', function () {
    $.getJSON('https://jsonplaceholder.typicode.com/users/3')
      .done(function (u) {
        var city = (u.address && u.address.city) || '—';
        $('#card').removeClass('muted').html('');
        $('#card')
          .append($('<div/>').text(u.name || 'Unknown'))
          .append($('<div class="muted"/>').text(u.email || ''))
          .append($('<div/>').text('City: ' + city));
      })
      .fail(function () {
        $('#card').text('Could not parse or fetch JSON');
      });
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <button type="button" id="load">Load user JSON</button>
  <div id="card" class="box muted">No data</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#load').on('click', function () {
    $.getJSON('https://jsonplaceholder.typicode.com/users/3')
      .done(function (u) {
        var city = (u.address && u.address.city) || '—';
        $('#card').removeClass('muted').html('');
        $('#card')
          .append($('<div/>').text(u.name || 'Unknown'))
          .append($('<div class="muted"/>').text(u.email || ''))
          .append($('<div/>').text('City: ' + city));
      })
      .fail(function () {
        $('#card').text('Could not parse or fetch JSON');
      });
  });
});
</script>
</body>
</html>

Result