Last time you built a Treasure Vault that saves data with localStorage. But HOW does a real object turn into text that storage can hold? Today you'll learn JSON — the universal data language that turns movies into text and back. Every app and website on Earth speaks JSON!
Welcome to Movie Studio! You're the studio archivist. Build movie records, pack them into text to ship anywhere, and unpack text back into movies. Real movie sites like IMDB send data as JSON — now you'll speak that language!
⚡ Today's Concept
JSON: The Universal Data Language
Computers can only save and send text. But your data is objects and arrays! JSON solves this: JSON.stringify squashes an object into a text string, and JSON.parse inflates text back into a real object. It's the #1 way every app exchanges data.
// Turn a movie object into text (for saving / sending) var text = JSON.stringify(myMovie) // Turn text back into a real object var movie = JSON.parse(text) // movie.title works again! 🎉
🎬 Build a Movie Record
⭐ Tap to rate
🎭 Pick a genre
🎟️ Live Movie Card
📋 Data Blueprint (key → value)
📦 JSON Transformer empty
Pack a movie into text — then unpack text back into a movie!
📼 Data Tape (the JSON text)
Nothing packed yet — tap "Pack to JSON" to turn your movie into text!
Build a movie above, then pack it!
🎞️ Movie Archive 0 films
Add finished movies to your collection, then pack the WHOLE archive as one JSON array!
Add 2+ movies, then pack the collection!
🎯 Challenges
0 of 4 challenges0/4
🏆
Studio Archivist!
You mastered JSON — the language every app uses to save and send data!
What You Learned
Data has a shape — objects hold key → value pairs like title → "..." and rating → 5.
JSON.stringify() squashes an object into a text string that can be saved or sent.
JSON.parse() inflates that text back into a real object you can use again.
Text values get quotes, numbers don't — that's how JSON tells them apart.
Whole collections pack into a JSON array: [ {...}, {...} ] — one text string holds many records!
🚀 Come back tomorrow! Next: learn error handling — what happens when JSON text is broken or data goes missing? Build a crash-proof app with try/catch! 🛡️