HTML CSS Bootstrap JavaScript jQuery MySQL PHP Data Mining

JSON Objects

A JSON object is a set of unordered key-value pairs surrounded by curly braces {}. JSON objects are almost identical to JavaScript objects, which makes them incredibly natural to work with in web applications.


Object Property Explorer

Click the access paths below to see how to retrieve data from a complex nested JSON object:

The JSON Data:
{
  "user": "Alice",
  "meta": {
    "id": 505,
    "role": "Moderator"
  },
  "site": "RedoHub"
}
Access Patterns:
Result: Click a button...

Object Syntax

JSON objects must be surrounded by curly braces. They contain key-value pairs separated by commas. Keys must be **double-quoted strings**, and values must be valid JSON data types.

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

Accessing Object Values

You can access object values by using dot (.) notation or bracket ([]) notation.

Dot Notation

let x = obj.name;

Bracket Notation

let x = obj["name"];
Tip: Bracket notation is particularly useful when the key name is stored in a variable or contains characters that aren't valid for dot notation (like spaces or special symbols).

Nested JSON Objects

Objects can contain other objects as values. You can "chain" dot or bracket notation to reach deep into the hierarchy.

const myObj = {
  "name":"John",
  "cars": {
    "car1":"Ford",
    "car2":"BMW"
  }
};

// Access nested property
console.log(myObj.cars.car2); // "BMW"

Modifying Values

You can use either notation to modify any value in a JSON object after it has been parsed into a JavaScript object.

obj.name = "Jane";
obj["city"] = "London";

Deleting Properties

Use the delete keyword to remove a property from an object.

delete obj.city;

Key Points to Remember

  • Objects are surrounded by {}.
  • Dot notation is the most common way to access properties.
  • Bracket notation is required for dynamic keys.
  • You can nest objects indefinitely.
  • Parsed JSON objects are **mutable** (can be changed or deleted).