JS Json

Prev

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. JSON is often used to transmit data between a server and a web application.

Key Points

• Structure: JSON data is written as key-value pairs.

• Data Types: JSON supports strings, numbers, objects, arrays, booleans, and null.

• Format: JSON format is a text format that is completely language-independent.

Example JSON Object

{
"name": "John",
"age": 30,
"city": "New York",
"isStudent": false,
"courses": ["Math", "Science", "English"],
"address": {
"street": "123 Main St",
"zipcode": "10001"
}
}

JavaScript JSON Methods

JavaScript provides two main methods to work with JSON:

1. JSON.parse(): This method parses a JSON string and converts it into a JavaScript object.

2. JSON.stringify(): This method converts a JavaScript object into a JSON string.

Examples:

Parsing JSON

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObject = JSON.parse(jsonString);

document.write(jsonObject.name); // Output: John
document.write(jsonObject.age); // Output: 30

Stringifying JSON

const jsObject = {
name: "John",
age: 30,
city: "New York"
};
const jsonString = JSON.stringify(jsObject);
document.write(jsonString);
// Output: {"name":"John","age":30,"city":"New York"}

Working with Arrays

const jsonArrayString = '["Apple", "Banana", "Cherry"]';
const jsonArray = JSON.parse(jsonArrayString);

document.write(jsonArray[0]); // Output: Apple
document.write(jsonArray[1]); // Output: Banana

Advantages of JSON

Lightweight: JSON is lightweight and easy to read and write.

Interoperability: JSON is language-independent, making it ideal for data interchange between different programming languages.

Structure: JSON's structure is similar to JavaScript objects, making it easy to work with in JavaScript.

Example:

<script>
    // JSON string
    const jsonString = '{"name": "John", "age": 30, "city": "New York", "isStudent": false, "courses": ["Math", "Science", "English"], "address": {"street": "123 Main St", "zipcode": "10001"}}';

    // Parse JSON string into JavaScript object
    const jsonObject = JSON.parse(jsonString);

    // Accessing data
    const name = jsonObject.name;
    const age = jsonObject.age;
    const city = jsonObject.city;
    const isStudent = jsonObject.isStudent;
    const courses = jsonObject.courses.join(", ");
    const street = jsonObject.address.street;
    const zipcode = jsonObject.address.zipcode;

    // Display data using document.write
    document.write("<p>Name: " + name + "</p>");
    document.write("<p>Age: " + age + "</p>");
    document.write("<p>City: " + city + "</p>");
    document.write("<p>Is Student: " + isStudent + "</p>");
    document.write("<p>Courses: " + courses + "</p>");
    document.write("<p>Address: " + street + ", " + zipcode + "</p>");
</script>

Output:

Name: John
Age: 30
City: New York
Is Student: false
Courses: Math, Science, English
Address: 123 Main St, 1000

Prev