JSON
📚 What is JSON? JSON (JavaScript Object Notation) is the universal language of data on the web. When your app talks to an API, data travels as a JSON string. JSON.stringify() converts a JavaScript object into a JSON string for sending. JSON.parse() converts it back into an object after receiving.
Appy Says…
JSON is the universal language of the internet. Every API — Twitter, Spotify, YouTube, weather, maps — sends data as JSON. If you can read and write JSON in JavaScript, you can connect your app to anything on the web.
What is JSON?
JSON (JavaScript Object Notation) is a text format for representing structured data. It looks almost identical to a JavaScript object, but it has strict rules: keys must be double-quoted strings, and only certain value types are allowed.
- •Valid JSON types:
string,number,boolean,null,array,object - •NOT valid in JSON:
undefined, functions,Date,Symbol - •Parse JSON string → JS object:
JSON.parse(jsonString) - •Convert JS object → JSON string:
JSON.stringify(jsObject) - •Pretty print:
JSON.stringify(obj, null, 2)(indent 2 spaces) - •JSON keys are always double-quoted:
{"name": "Appy"}
Think of it like a universal game save format
Imagine every game could read each other's save files because they all used the same format. JSON is that universal format for the web — no matter what language the server uses (Python, Ruby, Java), it speaks JSON and so does your browser.
How It Works
- •1. Server sends a HTTP response with body:
{"user": "Appy", "score": 95} - •2.
const data = JSON.parse(responseText)converts it to a JavaScript object - •3. Access normally:
data.user,data.score - •4. To send data:
JSON.stringify({ action: 'like', postId: 42 }) - •5.
fetchwith.json()does the parse automatically - •6. Wrap
JSON.parseintry/catch— invalid JSON throws a SyntaxError
Real-World Examples
- •Spotify's API returns your playlists as a JSON array of objects
- •TikTok's For You feed is a JSON array of video metadata objects
- •Weather apps fetch JSON with temperature, humidity, and forecast data
- •WhatsApp stores your chat backup as encrypted JSON
- •Vite/npm config files (
package.json) are JSON — you edit them constantly
Key Facts
- •JSON was invented by Douglas Crockford in the early 2000s and is now used by virtually every web API
- •
JSON.stringify()skipsundefinedvalues and functions — they simply disappear - •A
Dateobject stringifies to an ISO string:"2025-01-15T10:30:00.000Z" - •
JSON.parse(JSON.stringify(obj))is a quick deep clone — but loses Dates and functions
Watch Out!
JSON has no undefined — properties with undefined values are silently dropped during JSON.stringify(). If you send { score: undefined }, the server receives {}. Use null for intentional absence of a value.
Remember
JSON.parse(str) → JavaScript object. JSON.stringify(obj) → JSON string. Always wrap JSON.parse in try/catch.
What You Learned
- •JSON is the universal text format for APIs; parse with
JSON.parse(), stringify withJSON.stringify() - •JSON has no
undefined, functions, or Dates — only 6 types - •Unlocks: consuming any web API, sending data to servers, config files
Key Facts
- →JSON was invented by Douglas Crockford in the early 2000s and is now used by virtually every web API
- →
JSON.stringify()skipsundefinedvalues and functions — they simply disappear - →A
Dateobject stringifies to an ISO string:"2025-01-15T10:30:00.000Z" - →
JSON.parse(JSON.stringify(obj))is a quick deep clone — but loses Dates and functions
Real-World Examples
Remember
JSON.parse(str) → JavaScript object. JSON.stringify(obj) → JSON string. Always wrap JSON.parse in try/catch.
Quick Quiz
JSON.stringify() does?