Home [Javascript] Introduction to JSON in Javascript
Post
Cancel

[Javascript] Introduction to JSON in Javascript

Intro

What is JSON?

JSON, which stands for JavaScript Object Notation, is a lightweight data interchange format. It is easy for humans to read and write and easy for machines to parse and generate. JSON is widely used in web development to send data between a server and a client, as an alternative to XML.

Syntax of JSON

JSON syntax is a subset of the JavaScript object notation syntax. It consists of key-value pairs, where keys must be strings enclosed in double quotes and values can be strings, numbers, arrays, objects, booleans, or null values. Arrays and objects can be nested within each other to create complex data structures.

Here is an example of a simple JSON object:

1
2
3
4
5
6
7
8
9
10
{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "coding"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

Using JSON in JavaScript

In JavaScript, you can parse a JSON string into a JavaScript object using the JSON.parse() method and stringify a JavaScript object into a JSON string using the JSON.stringify() method.

Example 1: Parsing JSON

1
2
3
4
const jsonString = '{ "name": "John Doe", "age": 30 }';
const parsedObject = JSON.parse(jsonString);

console.log(parsedObject.name); // Output: John Doe

Example 2: Stringifying Object

1
2
3
4
const obj = { name: "Jane Smith", age: 25 };
const jsonString = JSON.stringify(obj);

console.log(jsonString); // Output: {"name":"Jane Smith","age":25}

Compatibility

JSON is supported on all modern web browsers and can be used in all versions of JavaScript. It is a standard format for data interchange and is widely used in web development for sending and receiving data.

In conclusion, JSON is a versatile and easy-to-use format for storing and transmitting data in JavaScript. It provides a simple and lightweight way to represent complex data structures in a human-readable format. By understanding JSON, developers can effectively work with data in web applications.

This post is licensed under CC BY 4.0 by the author.
Contents