JSON Object Literals

JSON (JavaScript Object Notation) is a lightweight format for storing and exchanging data. JSON object literals represent data as key-value pairs, similar to JavaScript objects, but in a more strict syntax.

JSON Object Literal Syntax

JSON object literals are written as a collection of key-value pairs enclosed within curly braces {}. Keys must be strings enclosed in double quotes ("), and values can be:

• Strings (in double quotes)
• Numbers
• Booleans (true or false)
• Null
• Arrays
• Nested objects

Example of a JSON Object Literal:

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "Python", "HTML"],
  "address": {
    "city": "New York",
    "zipCode": 10001
  }
}

Differences Between JSON and JavaScript Object Literals

Example Comparison:

JSON:

{
  "key": "value"
}

JavaScript Object:

const obj = {
  key: "value",
  method: () => console.log("Not valid in JSON"),
};

Parsing JSON Object Literals in JavaScript

To work with JSON in JavaScript, you can use:

• JSON.parse(): Converts a JSON string into a JavaScript object.
• JSON.stringify(): Converts a JavaScript object into a JSON string.

Example:

const jsonString = '{"name": "Alice", "age": 30}'; // JSON string
const jsObject = JSON.parse(jsonString); // Convert to JS object
console.log(jsObject.name); // Output: Alice

const jsonStringified = JSON.stringify(jsObject); // Convert back to JSON string
console.log(jsonStringified); // Output: '{"name":"Alice","age":30}'

Use Cases for JSON Object Literals

• Data Exchange: JSON is widely used in APIs to send and receive structured data.

{
  "status": "success",
  "data": {
    "id": 123,
    "name": "John Doe"
  }
}

• Configuration Files: JSON is used in tools like ESLint or package managers (package.json).

{
  "name": "project-name",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}

• Storing Data Locally: In web development, JSON is used with localStorage or sessionStorage.

localStorage.setItem("user", JSON.stringify({ name: "Alice", age: 30 }));
const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name); // Output: Alice

Validating JSON Object Literals

To ensure JSON object literals are valid, you can use online validators like JSONLint or integrated tools in IDEs.

For more tutorials and JavaScript resources, explore The Coding College.