JSON CheatSheet

This is a quick reference cheat sheet for leran and how to use json.

Getting Started

Introduction

JSON (JavaScript Object Notation) is a lightweight, text-based data format used for storing and exchanging structured data, especially between a server and a web client.

JSON is easy for humans to read and write, and simple for machines to parse and generate.
JSON is language-independent and supported by virtually all modern programming languages.
JSON was created by Douglas Crockford in the early 2000s.
JSON filename extension is .json
JSON mime-type is application/json

Syntax Rules

The JSON syntax is largely a subset of the JavaScript syntax. Here are its core components:

Data is in Key-Value Pairs.
Data is separated by commas.
Curly Braces {} Hold Objects.
Square Brackets [] Hold Arrays.
Strings Must Use Double Quotes "".
No Trailing Commas.
White Spaces is allowed and ignored.

Example

{
  "name": "Jason",
  "age": 39,
  "height": 1.92,
  "gender": "M",
  "salary": 70000,
  "married": true,
  "children": [
    { "name": "Tom", "age": 9, "gender": "M" },
    { "name": "Ava", "age": 7, "gender": "F" }
  ]
}

Data Types

Type	Description	Example
String	Textual data enclosed in double quotes	`"Hello, World!"`
Number	Numeric data, can be integer or floating-point	`42`, `3.14`
Boolean	Represents true or false values	`true`, `false`
Null	Represents an empty value	`null`
Object	A collection of key-value pairs enclosed in curly braces	`{"name": "John", "age": 30}`
Array	An ordered list of values enclosed in square brackets	`["apple", "banana", "cherry"]`

Number


`Integer`	Digits 1-9, 0 and positive or negative
`Fraction`	Fractions like 0.3, 3.9
`Exponent`	Exponent like e, e+, e-, E, E+, E
`Zero`	0

{
  "integer": 42,
  "fraction": 3.14,
  "exponent": 1.5e3,
  "zero": 0
}

Boolean


`true`	Represents a true value
`false`	Represents a false value

{
  "isActive": true,
  "isCompleted": false
}

String

Various special characters that you can use in strings of a JSON document:


`\"`	Double quote
`\/`	Forward slash
`\b`	Backspace
`\\`	Backslash
`\u`	Unicode escape sequence
`\n`	Newline
`\f`	Form feed
`\r`	Carriage return
`\t`	Tab

{
  "url": "https://cheatsheets.zip",
  "msg": "Hi,\n\"CheatSheets.zip\"",
  "intro": "Share quick reference and cheat sheet for developers."
}

You can use only Decimal Literals, below is invalid example:

{ "foo": 0xff }

Object

Multiple key/value pairs separated by a comma, can be nested and include array.

{
  "name": "John",
  "age": 30,
  "isStudent": false,
}

Nested objects are also allowed:

{
  "person": {
    "name": "Alice",
    "age": 25,
    "address": {
      "street": "456 Elm St",
      "city": "Los Angeles"
    }
  }
}

Objects can also contain arrays:

{
  "company": {
    "name": "TechCorp",
    "employees": [
      { "name": "Alice", "position": "Developer" },
      { "name": "Bob", "position": "Designer" }
    ]
  }
}

Array

Begins with [ and ends with ]:

{
  "numbers": [1, 2, 3, 4, 5],
}

Array can contain multiple values of any type:

{
  "fruits": ["apple", "banana", "cherry"],
  "numbers": [1, 2, 3, 4, 5],
  "mixed": [1, "two", true, null]
}

Array can also contain objects:

{
  "people": [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 }
  ]
}

Nested arrays are also allowed:

{
  "matrix": [[1, 2], [3, 4]],
  "nested": [[1, 2], ["a", "b"]]
}

Syntax Errors

JSON syntax errors can occur due to various reasons. Here are some common examples of JSON syntax errors: Missing or Extra Commas

{
  "name": "Alice"
  "age": 25 // Missing comma after "Alice"
}

Missing or Extra Commas

{
  "name": "Alice",
  "age": 25,
} // Extra comma after the last property

Including Functions or Undefined

{
  "name": "Alice",
  "age": 25,
  "greet": function() { // Functions are not allowed in JSON
    return "Hello!";
  }
}

Unquoted Property Names

{
  name: "Alice", // Property names must be enclosed in double quotes
  "age": 25
}

Invalid Number Formats

{
  "age": 25.5.5 // Invalid number format
}

Unclosed Structures

{
  "name": "Alice",
  "age": 25 // Missing closing brace

JSON In JavaScript

Access Object

Example JSON Object:

{
  "person": {
    "name": "Alice",
    "age": 25,
    "school": null,
    "address": {
      "street": "123 Main St",
      "city": "New York"
    }
  }
}

Accessing properties in a JSON object can be done using dot notation :

Operation	Result
`person.name`	`"Alice"`
`person.age`	`25`
`person.school`	`null`
`person.address`	`{ "street": "123 Main St", "city": "New York" }`
`person.address.street`	`"123 Main St"`
`person.address.city`	`"New York"`

Accessing properties in a JSON object can also be done using bracket notation :

Operation	Result
`person["name"]`	`"Alice"`
`person["age"]`	`25`
`person["school"]`	`null`
`person["address"]`	`{ "street": "123 Main St", "city": "New York" }`
`person["address"]["street"]`	`"123 Main St"`
`person["address"]["city"]`	`"New York"`

Create JSON Object

You can create a JSON object in JavaScript using either object literal notation or by parsing a JSON string.

const jsonObject = {
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
};
console.log(jsonObject.name); // Output: Alice
console.log(jsonObject.age);  // Output: 25

You can also create a JSON object by parsing a JSON string.

const jsonString = '{"name": "Alice", "age": 25, "isStudent": false}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: Alice
console.log(jsonObject.age);  // Output: 25

JSON.parse()

The JSON.parse() method is used to convert a JSON string into a JavaScript object.

const jsonString = '{"name": "Alice", "age": 25}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: Alice
console.log(jsonObject.age);  // Output: 25

JSON.stringify()

The JSON.stringify() method is used to convert a JavaScript object into a JSON string.

const jsonObject = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // Output: {"name":"Alice","age":25}

Validate JSON

You can validate JSON data in JavaScript using the JSON.parse() method. If the JSON is valid, it will return the parsed object; if not, it will throw an error.

const jsonString = '{"name": "Alice", "age": 25}';
try {
  const jsonObject = JSON.parse(jsonString);
  console.log("Valid JSON:", jsonObject);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

Post JSON Data Use fetch API

You can post JSON data to a server using the fetch API in JavaScript. Here's an example:

const jsonData = {
  name: "Alice",
  age: 25,
  isStudent: false
};
fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(jsonData)
})
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Post JSON Data Use XMLHttpRequest API

You can also post JSON data using the XMLHttpRequest API in JavaScript. Here's an example:

const jsonData = {
  name: "Alice",
  age: 25,
  isStudent: false
};
const xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log("Success:", xhr.responseText);
    } else {
      console.error("Error:", xhr.statusText);
    }
  }
};
xhr.send(JSON.stringify(jsonData));

JSON vs JSON5

JSON5

JSON5 is an extension of JSON that aims to make it easier to write and read JSON data by allowing for more flexible syntax and additional features. It is not part of the official JSON specification but is widely used in JavaScript projects.

Here are common scenarios where using JSON5 is beneficial:

Config files for tools
- e.g., .babelrc, .eslintrc, tsconfig.json5
Human-edited settings
- Easier to read and document with comments
Prototyping structured data
- Great for mocking APIs or creating test data quickly
Build scripts and environments
- Developers can maintain structured data with clarity
Alternative to JS config files
- A simpler, safer replacement when you don’t need full JS

JSON5 Example

{
  // This is a comment
  name: 'Alice', // Unquoted property name
  age: 25, // Trailing comma allowed
  isStudent: false,
  courses: [
    'Math',
    'Science',
    'History' // Trailing comma allowed
  ],
  address: {
    street: '123 Main St',
    city: 'New York'
  },
  // Multi-line string
  description: `Alice is a student
  who loves learning new things.`
}

JSON VS JSON5

Feature / Syntax	JSON	JSON5
Trailing Commas	❌ Not allowed	✅ Allowed after last array element or object property
Single Quotes	❌ Only double quotes	✅ Strings may use single quotes
Unquoted Keys	❌ Object keys must be quoted	✅ Identifiers as keys may be unquoted
Multi-line Strings	❌ Must be escaped	✅ Multi-line via single-quoted, double-quoted, or back-tick templates
Comments	❌ Not supported	✅ Both `// line` and `/* block */` comments
Hexadecimal Numbers	❌ Not supported	✅ e.g., `0xFF`
Leading / Trailing Decimal Points	❌ Not allowed	✅ e.g., `1.` or `.5`
`+` / `-` Infinity & NaN	❌ Not supported	✅ `Infinity`, `-Infinity`, `NaN` literals
Explicit Plus Sign	❌ Not allowed	✅ e.g., `+42`
`undefined` Literal	❌ Not supported	✅ Value allowed
Root Value Types	Must be object or array	Any JSON5 value allowed at root

JSON Advanced

JSON Schema

JSON Schema is a vocabulary that allows you to define the structure, content, and rules for JSON data. It is used to validate whether a JSON document matches the expected format and constraints. It provides a way to describe:

Validation: Ensure incoming JSON data is correct and safe.
Documentation: Describe the structure of your data clearly.
Automation: Enable code generation, form creation, and API validation.
Tooling: Works with validators like AJV, OpenAPI, Swagger, etc.

Example:

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 },
    "email": { "type": "string", "format": "email" }
  },
  "required": ["name", "email"],
  "additionalProperties": false
}

JSON Schema Validation

To validate JSON data against a JSON Schema, you can use libraries like ajv . Here's an example:

import Ajv from "ajv";
import addFormats from "ajv-formats";

// 1. Define a JSON Schema
const userSchema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "integer", minimum: 0 },
    email: { type: "string", format: "email" }
  },
  required: ["name", "email"],
  additionalProperties: false
};
// 2. Create AJV instance and enable formats (like "email")
const ajv = new Ajv();
addFormats(ajv);
// 3. Compile the schema
const validate = ajv.compile(userSchema);
// 4. Sample JSON data to validate
const data = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};
// 5. Perform validation
const isValid = validate(data);
// 6. Output result
if (isValid) {
  console.log("✅ JSON data is valid!");
} else {
  console.log("❌ JSON data is invalid:");
  console.log(validate.errors);
}

viewjson