What is JSON? A Beginner's Guide with Examples

Category: JavaScript Basics | Published on: May 14, 2024 by Dr. Talib

If you work with web APIs or JavaScript, you've undoubtedly encountered JSON. JSON, which stands for JavaScript Object Notation, is the most popular format for sending data between a server and a web application. It's simple, lightweight, and easy for both humans and machines to understand.

This guide will demystify JSON, explain its syntax, and show you how to work with it in JavaScript.

What Exactly is JSON?

At its core, JSON is just a text-based format for representing structured data. Even though it has "JavaScript" in its name, it's a language-independent standard, meaning it can be used with Python, Java, PHP, and almost any other programming language.

Its syntax is derived from JavaScript object literal syntax, which is why it feels so natural to use in front-end development.

JSON Syntax Rules

JSON has a very strict but simple set of rules:

• Data is in key/value pairs (e.g., "name": "John").
• Keys must be strings enclosed in double quotes.
• Data is separated by commas.
• Curly braces {} hold objects.
• Square brackets [] hold arrays.

Data Types Supported in JSON

• String: "Hello, world!" (Must use double quotes).
• Number: 101 or 3.14.
• Boolean: true or false.
• Array: ["apple", "banana", "cherry"].
• Object: A collection of key/value pairs inside {}.
• null: Represents an empty value.

Example JSON Object

Here’s a typical JSON object representing a user.

{
  "id": 12345,
  "name": "Jane Doe",
  "email": "[email protected]",
  "isActive": true,
  "roles": [
    "editor",
    "contributor"
  ],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  },
  "lastLogin": null
}

Working with JSON in JavaScript

JavaScript provides a built-in global JSON object with two essential methods for working with JSON data.

1. `JSON.parse()`: Converting a JSON String to a JavaScript Object

When you receive data from a server (e.g., via the Fetch API), it usually arrives as a JSON string. To use this data in your code, you need to "parse" it into a real JavaScript object.

// A JSON string (e.g., from an API)
const jsonString = '{"name":"Alice","age":30,"city":"New York"}';

// Parse the string into a JavaScript object
const userObject = JSON.parse(jsonString);

// Now you can access its properties
console.log(userObject.name); // Output: Alice
console.log(userObject.age);  // Output: 30

2. `JSON.stringify()`: Converting a JavaScript Object to a JSON String

When you need to send data to a server, you must convert your JavaScript object into a valid JSON string. `JSON.stringify()` does this for you.

// A JavaScript object
const product = {
  id: 'prod-001',
  name: 'Wireless Headphones',
  inStock: true,
  price: 99.99,
  // This function will be ignored by JSON.stringify()
  display: function() { console.log(this.name); } 
};

// Convert the object into a JSON string
const jsonProduct = JSON.stringify(product);

console.log(jsonProduct);
// Output: '{"id":"prod-001","name":"Wireless Headphones","inStock":true,"price":99.99}'

Conclusion

JSON is the universal language for data on the modern web. Its simplicity and similarity to JavaScript objects make it incredibly easy to learn and use.

• JSON is a text format for structured data using key/value pairs.
• Keys must always be in double quotes.
• Use JSON.parse() to turn JSON text from a server into a usable JavaScript object.
• Use JSON.stringify() to turn a JavaScript object into a JSON text string to send to a server.

Understanding these two methods is all you need to start effectively working with APIs and web data.

Use our Live HTML Viewer to practice parsing and stringifying JSON data in your browser!