Need help with your JSON?

Try our JSON Formatter tool to automatically identify and fix syntax errors in your JSON. JSON Formatter tool

Pair Programming Exercises for JSON Formatter Skills

Mastering JSON formatting isn't just about making it pretty; it's about ensuring readability and correctness. Practice with a partner to level up your skills!

Why Focus on JSON Formatting?

JSON (JavaScript Object Notation) is the de facto standard for data interchange on the web and in many applications. While parsing libraries handle the conversion from text to data, understanding and manipulating the text format itself is crucial for:

Debugging API responses or configuration files.
Writing tests.
Manually constructing data payloads.
Troubleshooting serialization/deserialization issues.
Maintaining readable codebases that include embedded JSON strings.

Good JSON formatting (consistent indentation, spacing, and ordering) significantly improves readability, making it easier to spot errors and understand data structures.

Pair Programming for Formatting Skills

Pair programming involves two developers working together at one workstation. One is the "driver" (writing code), and the other is the "navigator" (guiding and reviewing). This approach is excellent for learning formatting skills because:

Immediate Feedback: The navigator can catch formatting inconsistencies or errors as the driver types.
Shared Knowledge: You learn each other's mental models for structuring JSON.
Different Perspectives: One might see a clearer way to indent a complex structure than the other.
Reinforces Rules: Articulating *why* you format something a certain way helps solidify your understanding.
Handling Edge Cases: Two pairs of eyes are better at spotting tricky cases like empty objects/arrays or escaped characters.

The Core JSON Formatting Rules

Recall the basic rules of well-formatted JSON:

Objects { } contain key-value pairs. Keys are strings in double quotes.
Arrays [ ] contain ordered lists of values.
Values can be: strings, numbers, booleans (`true`, `false`), `null`, objects, or arrays.
Key-value pairs in objects are separated by commas ,.
Elements in arrays are separated by commas ,.
Keys and values are separated by a colon :.
Whitespace (spaces, tabs, newlines) is used for indentation to show structure.
Typically, a consistent indentation level (e.g., 2 or 4 spaces) is used for nested structures.
A space is usually placed after the colon (:) separating a key and its value.

Pair Programming Exercises

Exercise 1: Basic Object and Array

Objective: Format a simple object containing primitives and a flat array. Focus on correct indentation, spacing around colons, and commas.

Input (Unformatted):

{"name":"Alice","age":30,"isStudent":false,"courses":["Math","Physics","Chemistry"]}

Expected Output (Formatted with 2-space indentation):

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "courses": [
    "Math",
    "Physics",
    "Chemistry"
  ]
}

Pairing Tip: Navigator watches for missing commas, incorrect spacing after colons, and consistent indentation level. Driver focuses on typing quickly and accurately.

Exercise 2: Nested Structures

Objective: Format JSON with objects nested within objects, and objects within arrays. Pay close attention to increasing indentation levels correctly.

Input (Unformatted):

{"company":{"name":"TechCorp","address":{"street":"123 Main St","city":"Anytown"}},"employees":[{"id":1,"name":"Bob"},{"id":2,"name":"Charlie"}]}

Expected Output (Formatted with 4-space indentation):

{
    "company": {
        "name": "TechCorp",
        "address": {
            "street": "123 Main St",
            "city": "Anytown"
        }
    },
    "employees": [
        {
            "id": 1,
            "name": "Bob"
        },
        {
            "id": 2,
            "name": "Charlie"
        }
    ]
}

Pairing Tip: Discuss the indentation strategy before starting. Navigator should guide the driver on when to increase/decrease indentation based on {, }, [, and ] characters.

Exercise 3: Edge Cases and Special Characters

Objective: Format JSON containing empty objects, empty arrays, `null` values, and strings with escaped characters.

Input (Unformatted):

{"emptyObj":{},"emptyArr":[],"nullableValue":null,"description":"This is a string with "quotes" and a \n newline.","status":true}

Expected Output (Formatted with 2-space indentation):

{
  "emptyObj": {},
  "emptyArr": [],
  "nullableValue": null,
  "description": "This is a string with \"quotes\" and a \n newline.",
  "status": true
}

Pairing Tip: Pay attention to the formatting of empty structures ({} and [] often stay on one line if empty) and ensure escaped characters within strings are preserved correctly (`\"` for `"` and `\\n` for newline). Navigator checks for the correct representation of boolean and null literals.

Exercise 4: Identify and Fix Malformed JSON

Objective: Given malformed JSON, identify the syntax errors (missing commas, incorrect quotes, missing brackets/braces, trailing commas, etc.) and format the corrected version.

Input (Malformed & Unformatted):

{name:"David", age: 42, "interests":["coding", "hiking",], city: "London" }

Expected Output (Corrected & Formatted with 2-space indentation):

{
  "name": "David",
  "age": 42,
  "interests": [
    "coding",
    "hiking"
  ],
  "city": "London"
}

Pairing Tip: This is a great exercise for active navigation. The pair should read the input carefully, point out potential errors based on JSON rules, agree on the fix, and then apply the formatting. Errors in the input: key `name` and `city` not in double quotes, `age` value is not a string, trailing comma after "hiking", extra space before closing brace.

Beyond Manual Formatting: Tools

While manual formatting exercises are excellent for learning the rules, in practice, you'll often use tools:

`JSON.stringify()`: JavaScript's built-in method. It takes an optional `space` argument for indentation (e.g., `JSON.stringify(obj, null, 2)` for 2 spaces).
IDE/Editor Extensions: Many code editors (VS Code, Sublime Text, etc.) have plugins that automatically format JSON files.
Online Formatters: Websites dedicated to validating and formatting JSON are readily available.
Command-Line Tools: Tools like `jq` can process and pretty-print JSON from the command line.

However, understanding the underlying structure and rules gained from manual practice makes you much more effective when using these tools or debugging issues they might miss or misinterpret.

Conclusion

Practicing JSON formatting, especially through pair programming, is a valuable exercise for any developer. It reinforces fundamental data structure concepts, improves attention to detail, and directly contributes to writing cleaner, more readable code and easier debugging. Grab a partner, pick an exercise, and start formatting!

Need help with your JSON?

Try our JSON Formatter tool to automatically identify and fix syntax errors in your JSON. JSON Formatter tool