JSON Handling

Learning objectives#

• Parse and create JSON with JSON.parse and JSON.stringify
• Read nested objects and arrays from API data
• Render JSON into HTML safely
• Handle missing values and dates

Explanation#

JSON is text. JSON.parse(text) turns it into objects; JSON.stringify(obj) turns objects into text. With dataType: "json", jQuery parses responses for you.

Read nested data with dots and indexes: user.address.city, order.items[0].name. Use optional chaining (user.address?.city) and defaults (?? "–") for missing values.

Build HTML from data with jQuery elements and .text(), or with template literals that escape values. Never concatenate raw data into .html().

$.map(array, fn) or array.map(fn) transforms data; build all rows first and append once for speed.

Dates arrive as strings ("2026-10-28T09:30:00Z"). Convert with new Date(...) and format with toLocaleDateString().

Syntax#

1const obj = JSON.parse('{"name":"Pen","price":20}');
2const text = JSON.stringify({ name: 'Pen' });     // '{"name":"Pen"}'
3const city = user.address?.city ?? 'Unknown';

Code example: Rendering an order from JSON#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<div id="order" style="font-family:sans-serif"></div>
3<script>
4  $(function () {
5    const json = '{"id":1042,"customer":{"name":"Asha <b>Rao</b>","city":null},' +
6                 '"placedAt":"2026-10-28T09:30:00Z","items":[{"name":"Pen","price":20,"qty":3},{"name":"Notebook","price":60,"qty":1}]}';
7    const order = JSON.parse(json);
8

9    const total = order.items.reduce((sum, i) => sum + i.price * i.qty, 0);
10    const $box = $('#order');
11    $('<h3>').text('Order #' + order.id).appendTo($box);
12    $('<p>').text('Customer: ' + order.customer.name + ' (' + (order.customer.city ?? 'city not given') + ')').appendTo($box);
13    $('<p>').text('Placed: ' + new Date(order.placedAt).toISOString().slice(0, 10)).appendTo($box);
14

15    const $rows = order.items.map(i => $('<li>').text(i.qty + ' × ' + i.name + ' = ₹' + i.price * i.qty));
16    $('<ul>').append($rows).appendTo($box);
17    $('<p>').text('Total: ₹' + total).appendTo($box);
18

19    console.log('Items:', order.items.length, 'Total:', total);
20    console.log('Back to JSON:', JSON.stringify({ id: order.id, total }));
21  });
22</script>

Items: 2 Total: 120
Back to JSON: {"id":1042,"total":120}
(The page shows “Order #1042”, the customer name with the <b> tags as plain text, “city not given”, the date 2026-10-28, two items and “Total: ₹120”.)

Step-by-step explanation#

1. JSON.parse turns the text into an object with a nested customer and an items array.
2. reduce adds up price × qty for the total.
3. ?? supplies a fallback for the null city.
4. Every value is inserted with .text(), so the HTML in the name is displayed, not executed.
5. All list items are built first and appended in one call.

Real-world use case#

Common mistakes#

Best practices#

• Let jQuery parse with dataType: "json"
• Guard nested reads with ?. and ??
• Render with .text()
• Build rows first, append once

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<ul id="list"></ul>
3<script>
4  $(function () {
5    const items = JSON.parse('[{"name":"Pen","stock":0},{"name":"Bag","stock":4}]');
6    $('#list').append(items.map(i => $('<li>').text(i.name + (i.stock === 0 ? ' (sold out)' : ''))));
7    console.log($('#list li').first().text());   // Pen (sold out)
8  });
9</script>

Mini quiz#

console.log(JSON.stringify({ a: 1, b: [2, 3] }));

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.