These are fictional learning examples, so you can experiment without using real student or customer records. Copy a code block into JSON Formatter & Validator, format it, and inspect the tree before changing a value.
Example 1: a simple JSON object
{
"name": "Ada",
"course": "Web Development",
"active": true,
"projects": 3,
"mentor": null
}The curly braces define an object. Each member has a string name, a colon, and a value. The names name and course identify string values; active identifies a boolean; projects identifies a number.
null is an explicit JSON value. It is different from leaving a property out. Whether null means “not assigned,” “unknown,” or something else depends on the application’s contract.
Example 2: an array of records
[
{"id": 1, "title": "Portfolio", "complete": true},
{"id": 2, "title": "JSON tool", "complete": false}
]The outer square brackets define an ordered list. Its items are objects. The first object sits at index zero, so the selector $[0].title returns "Portfolio". The second sits at index one.
Array order is meaningful. Sorting object keys changes the order of names within each record; it does not move the records themselves. To reorder records you need an application-specific operation, such as sorting by ID or title.
Example 3: a nested API-style response
{
"status": "success",
"data": {
"students": [
{"id": "9007199254740993", "name": "Ada", "skills": ["HTML", "CSS"]},
{"id": "9007199254740994", "name": "Tunde", "skills": ["JavaScript"]}
]
},
"pagination": {"page": 1, "per_page": 2, "total": 24}
}This fictional response wraps an array in data.students and includes separate pagination information. Expand data, then students, then one item to see the record’s fields.
The IDs are strings deliberately. They identify records rather than quantities to calculate, and their digits are longer than the range that ordinary JavaScript numbers represent safely. A real API should document whether its identifiers are strings or numbers so producers and consumers agree.
JSON value types at a glance
| Value | Type | What to remember |
|---|---|---|
{} | Object | Named members; property names are strings. |
[] | Array | Ordered items; indexes start at zero. |
"Ada" | String | Quoted text, with escapes when needed. |
42 or 10.5 | Number | Unquoted numeric token; receiver precision can matter. |
true or false | Boolean | Lowercase, with no quotes. |
null | Null | An explicit value, distinct from an omitted member. |
The type is part of the data. "42" is a string, 42 is a number, and "true" is different from true. Do not remove quotes simply because a value happens to contain digits.
Select a value from the nested example
| Path | Selected value |
|---|---|
$.status | "success" |
$.data.students[0].name | "Ada" |
$.data.students[0].skills[1] | "CSS" |
$.pagination.total | 24 |
The path selector returns JSON text. An extracted string still has surrounding quotes because those quotes are part of its serialized JSON form. You can copy the value into another JSON document while preserving its type.
A complete JSON document need not be an object
Each of the following is a complete JSON document on its own. Do not paste the whole block as one document; it lists separate examples:
"hello"
42
true
false
null
[]
{}An API may require an object even though the underlying JSON grammar accepts a primitive root. Syntax validation and endpoint requirements are separate checks.
Practice with three small tasks
- Inspect the type. Change
projectsfrom3to"3". Both versions validate, but the type changes. - Debug a separator. Add a comma after the last object member. Read the validation error, remove the comma, and check again.
- Compare layouts. Format the nested response, minify it, and format it again. The new layout is readable while the token values remain intact.
Next, read JSON vs JavaScript objects to understand how these text documents become values in code. Use the tree viewer whenever a response becomes too nested to scan comfortably.
Put the explanation to work. Open the tool to format, inspect, or validate your document.
Open JSON Formatter →