Loading...

JavaScript JSON

The last page kept changing how a function was called. This page leaves the call alone. You already have a product in memory; JSON is the note that describes it so a file, another program, or a later page can read the same facts.

The object is not the note

An object literal lives while the script runs. You can put a method on it, and this still follows the call, as the previous lesson showed. JSON is only text. It has no methods, and it does not choose this.

What the text is allowed to contain

📊 Live object versus JSON text

Piece Live object literal JSON text
Key quotes optional double quotes required
String quotes single or double double quotes only
Trailing comma allowed forbidden
Function can be a method omitted by stringify; illegal if typed in the text
undefined field a real value omitted when stringify walks an object

Double quotes are mandatory on every key and every string. A trailing comma, a comment, or a bare function is not valid JSON text.

stringify writes the note

javascript 
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));

stringify writes the note

JSON.stringify(product) walks the plain fields and returns one string. The console shows {"name":"Mug","price":12}. product itself is unchanged. You still read product.name as Mug on the live object. The string is a separate value you could save or send.

parse rebuilds a value

javascript 
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);

parse rebuilds a value from the note

text is still a string. JSON.parse(text) builds a fresh object, so product.name prints Mug, with no method call and no this.

A list inside the note

javascript 
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);

A list can sit inside the note

JSON text may hold an array. After parse, product.tags is a real array and product.tags[0] is ceramic. Arrays as their own topic come next. Here the array is only cargo inside the text.

The note drops behavior

javascript 
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));

The note keeps data, not behavior

price was undefined and tag was a function, so both disappear. The printed text is only {"name":"Mug"}. Behavior stays on the live object; the note never carries it.

Sloppy quotes do not parse

javascript 
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}

A sloppy note does not parse

Single quotes and an unquoted key are legal in an object literal and illegal in JSON. JSON.parse throws. The catch prints bad text instead of letting this demo crash. Fix the text with double quotes on the key and on the string. This is not the later errors lesson. It only shows that bad JSON stops parse.

Pick stringify or parse by the direction

Memory to text? stringify. Text to a value? parse. Need a function on the product afterwards? Add it after parse, because the note never had it. Need this? That still depends on the call, not on JSON. Next lesson is arrays. That list lives in the script, and it is not another JSON rule.

Show one field from the note

Parse a small product string and write name into the paragraph.

Page demo — name from the note

html 
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>

The paragraph shows Mug. The script never built an object literal. It only parsed text. Change the name inside the string, refresh, and the line follows.

Practice steps

  1. Stringify the mug and read the quoted text.
  2. Parse that same shape of text and read Mug.
  3. Parse the note that includes tags and read ceramic.
  4. Stringify an object that has a method and an undefined price, and read text that keeps only name.
  5. Parse a note with an unquoted key inside try / catch and read bad text.
  6. In the HTML demo, change only the name inside the string, refresh, and read the paragraph.

Frequent slip-ups

  • Treating JSON text as the same thing as an object literal
  • Using single quotes or an unquoted key inside the text you pass to parse
  • Expecting a method or undefined to survive stringify
  • Calling parse when you meant to produce text, or stringify when you already have text
  • Reading product.name on the string itself instead of on the value parse returned
  • Treating the next page as more JSON — arrays are a live list

Summary

  • JSON is text that describes data
  • JSON.stringify turns a plain object into that text
  • JSON.parse turns the text back into a value
  • Keys and strings use double quotes
  • A trailing comma or single quotes make parse throw
  • Methods and undefined object fields are dropped
  • A parsed field can fill one line on the page
  • Next: arrays, a live list in the script

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 37 of 38
Javascript Tutorial