Content updated
By the end, you can…
- JSON is text. Parsing it creates a JavaScript value, but does not prove that the value has the shape you need.
- Predict the example's result, change one part, and verify the behavior in your own script.
One idea at a time
JSON means JavaScript Object Notation, a text format used to exchange structured data. A JavaScript object and a JSON string are different kinds of values. Convert a supported JavaScript value into JSON text with JSON.stringify. Convert valid JSON text back with JSON.parse. These operations do not send anything across a network by themselves.
JSON supports objects, arrays, strings, numbers, booleans, and null. Property names and strings need double quotes. Comments, trailing commas, methods, and undefined are not JSON syntax. A response can be valid JSON and still be wrong for your interface, such as a string where you expected an object with a name.
What to remember first
JSON is text. Parsing it creates a JavaScript value, but does not prove that the value has the shape you need.
Read the code before trying it
JSON.stringify(value)Serialize supported data- The result is a string suitable for storage or transmission, not a live connection to the original object.
JSON.parse(text)Read JSON text- Invalid JSON throws an error. Valid JSON can parse to a simple value such as a string, number, or boolean, as well as an array, object, or null.
try { ... } catch (error) { ... }Handle a failure- Throwing an error stops the current path. If a statement in try throws, execution moves to catch. catch (error) names the error so you can inspect it; catch without parentheses is allowed when you do not use it. Choose a useful fallback message instead of continuing as if parsing succeeded.
typeof data.name === "string"Check the expected shape- First ensure data is not null and is an object before reading its properties.
JSON.stringify(value, null, 2)Make readable JSON text- The final argument asks for two-space indentation. null leaves property filtering unused.
Walk through an example
const learner = { name: "Mia", completed: 2 };
const text = JSON.stringify(learner, null, 2);
console.log(text);
const restored = JSON.parse(text);
console.log(restored.name);
console.log(typeof text);stringify creates a text snapshot with double-quoted keys. parse reads that snapshot into a new object, whose name is Mia. typeof text remains string. Changing learner after creating text does not rewrite the snapshot; serialize again when you need an updated representation.
See it happen: try a small change
Predict the result, choose a version, then compare the code and output. Try the controls when the example has them. Each version starts fresh.
Code to notice
const text = '{"name":"Mia"}';
try {
const data = JSON.parse(text);
if (data && typeof data.name === "string") {
console.log(data.name);
} else {
console.log("Expected a name.");
}
} catch {
console.log("Could not read JSON.");
}Live result
What changed: Valid text with the expected name field can be used.
Look a little closer
Use try and catch around parsing text that may be invalid. Catching syntax errors is only the first step: inspect the parsed value's shape before using it. A successful parse of null does not give you an object with a name. Check for the fields and types your program actually needs.
JSON is not a universal clone mechanism. Functions and undefined object properties are omitted by stringify, cycles cannot be serialized this way, and date objects become strings. Keep your stored or transferred records deliberately simple. In the storage and fetch lessons, the same parse-and-check habit will protect the UI from unexpected data.
Try it in your own project
Keep JSON text in a quoted JavaScript string for this task; no extra file or server is needed yet. Try the valid record, malformed text, and the text "null" separately. Catch handles malformed syntax; the shape check handles valid data that lacks a name.
The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.
A common wrong turn
JSON.parse expects text, not an already-parsed object. Also avoid fixing malformed JSON with string replacement guesses; correct the source format or handle the failure. A friendly message is better than trying to read properties from an invalid result and causing a second error.
Your turn: move data between objects and JSON text
Serialize a small learning-progress record and recover safely from invalid text.
Try this in your own HTML and JavaScript files, then open the page in a browser. There is no separate checked practice for this task yet.
- Create a name and completed-count object and stringify it with indentation.
- Parse it and verify the recovered property values and types.
- Try invalid text in a separate run inside try/catch. Then try valid JSON null and reject it with a shape check.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.