30 Days of JavaScript: Working with JSON, Day 12

Learn how to work with JSON in JavaScript, including parsing, stringifying, and managing complex JSON data structures for modern web applications.

You call an API, and back comes a wall of text. Before your code can do anything with it, that text has to become real JavaScript you can loop over and read. That handoff is what Day 12 of our 30 Days of JavaScript series is about: working with JSON.

JSON (JavaScript Object Notation) is a lightweight, text-based format for moving data around. It reads a lot like a JavaScript object, it travels well over the network, and every language worth using can parse it. That’s why it sits under most of the web’s client-server traffic.

Table of Contents

• Understanding JSON Data Format
• Translating Data: JSON.parse() and JSON.stringify()
• Working with JSON Arrays
• The Layers of Nested JSON Objects
• The Conversations of JSON APIs
• Advanced Techniques: JSON Schema, Filtering, and Formatting
• Wrapping Up Day 12

Understanding JSON Data Format

JSON is just keys and values written as text. Strings, numbers, booleans, null, arrays, and objects. That’s the whole vocabulary. It can’t hold functions or undefined, which is the point: it’s data, not code.

Consider this example:

{
  "name": "Apple Pie",
  "ingredients": ["Apples", "Flour", "Sugar"],
  "isDelicious": true
}

That’s a string, an array, and a boolean describing one apple pie. Two rules trip people up: every key has to be in double quotes, and you can’t leave a trailing comma after the last item. Single quotes or a stray comma and the parse fails.

JSON vs. XML: A Comparative Perspective

Readability: JSON is easier for a human to scan than XML’s opening and closing tags.

Efficiency: Less syntax means smaller payloads and faster parsing.

Interoperability: It maps straight onto JavaScript objects, so there’s no translation layer in the browser.

Translating Data: JSON.parse() and JSON.stringify()

Two methods do all the heavy lifting: JSON.parse() turns a JSON string into a JavaScript object, and JSON.stringify() goes the other way.

Converting JSON to a JavaScript object:

/**
 * Parses a JSON string into a JavaScript object.
 *
 * @returns {Object}
 */
let jsonString = '{"fruit":"Apple", "color":"Red"}';
let object = JSON.parse(jsonString);

One caveat worth burning in early: if the string isn’t valid JSON, JSON.parse() throws a SyntaxError. It doesn’t return null and it doesn’t warn you. Any time the data comes from outside your control, wrap the call in try/catch so a bad response doesn’t take down the whole script.

Converting a JavaScript object to JSON:

/**
 * Converts a JavaScript object into a JSON string.
 *
 * @returns {string}
 */
let object = {fruit: "Apple", color: "Red"};
let jsonString = JSON.stringify(object);

Working with JSON Arrays

A value in JSON can be an array, which is how you represent a list of things.

Here’s a simple JSON array:

{
  "fruits": ["Apple", "Banana", "Cherry"]
}

Once you’ve parsed it, you reach the array like any other property:

/**
 * Accesses the array of fruits from a JSON object.
 *
 * @returns {Array}
 */
let fruits = jsonObject.fruits;

The Layers of Nested JSON Objects

Objects can hold other objects, as deep as you need. Real API responses almost always look like this, so get comfortable reaching down through the layers.

Consider this nested JSON object:

{
  "person": {
    "name": "John",
    "age": 30,
    "city": "New York"
  }
}

The Conversations of JSON APIs

This is where JSON earns its keep. You fetch a URL, and the server answers in JSON. Here response.json() reads the body and parses it for you, so you get an object back, not a string:

/**
 * Fetches data from an API and handles the response as JSON.
 *
 * @returns {void}
 */
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('An error occurred!', error));

Notice the .catch() on the end. Networks fail and servers send garbage, so always leave yourself somewhere to land when they do.

Advanced Techniques: JSON Schema, Filtering, and Formatting

A few things worth knowing once the basics stick: validating the shape of your data, pulling out just the parts you need, and printing it so a human can read it.

JSON Schema: A schema describes what valid data looks like, so you can check incoming JSON against a contract instead of hoping it’s right.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {"type": "string"},
    "age": {"type": "number", "minimum": 18}
  },
  "required": ["name", "age"]
}

This one says both “name” and “age” must be present, and “age” has to be at least 18.

Filtering JSON Data: Once JSON is a JavaScript array, it’s just an array. Array methods like filter() pull out only the records you care about.

/**
 * Filters an array of employees to only include those in the engineering department.
 *
 * @returns {Array}
 */
let employees = [
  {name: "John", department: "HR"},
  {name: "Jane", department: "Engineering"}
];
let engineers = employees.filter(person => person.department === "Engineering");

Formatting JSON Data: The third argument to JSON.stringify() sets the indentation. Pass 2 and you get readable, multi-line output instead of one dense line, which is what you want in logs and debugging.

/**
 * Formats a JSON object with a 2-space indentation for better readability.
 *
 * @returns {string}
 */
let object = {name: "John", age: 30};
let jsonString = JSON.stringify(object, null, 2); // Indents with 2 spaces

Wrapping Up Day 12

So that’s JSON. A plain-text format you parse with JSON.parse(), produce with JSON.stringify(), and reach into with the same array and object syntax you already use. Arrays and nesting cover the shapes real data comes in, and a try/catch around any parse keeps a bad response from breaking everything.

You’ll hit JSON everywhere from here: REST APIs, config files, and JSON-first databases like MongoDB. The moves are the same each time. Get the parse and stringify pair solid and the rest is just data you already know how to work with.

What’s Next?

Day 13 moves on to JavaScript libraries and frameworks, and how leaning on the right ones saves you from rebuilding the same wheels by hand.