JavaScript JSON

JSON stands for JavaScript Object Notation, and it is a lightweight data interchange format. JSON is designed to be easy for humans to read and write and easy for machines to parse and generate. It is based on a subset of the JavaScript programming language, but it can be used with any programming language.

JSON consists of key-value pairs, where the key is a string and the value can be a string, number, boolean, null, object or array. It is often used for transmitting data between a web server and a web application, as well as between different parts of a web application. JSON has become a popular alternative to XML as a data format, especially in web-based applications, due to its simplicity and ease of use.

JSON is built around two fundamental structures:

Object

An unordered collection of key/value pairs is what this is (i.e. key:value). Each item has a left curly bracket at the start and a right curly bracket at the conclusion. There are spaces between each key/value pair.

Array

An ordered list of values is what this is. Left and right brackets are used to start and terminate an array, respectively. A comma is used to separate values.

While the value in JSON can be any of the following: a text, integer, true or false, null, object, or even an array, the property names or keys are always strings. Strings can contain escape characters like \n, \t, and \ must be contained in double quotes.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JSON Array</h1>
<p>Please Check Console (F12)</p>

<script>
    var lang = `{
        "langs": [
            "HTML",
            "CSS",
            "JavaScript",
            "jQuery"
        ]
    }`;

    var result = JSON.parse(lang);
    console.log(result);   // Please Check Console
</script>

</body>
</html>

Preview

Parsing JSON Data in JavaScript

To parse JSON data in JavaScript, you can use the built-in JSON.parse() method. This method takes a JSON string as input and returns a JavaScript object that represents the data in the JSON string. You will receive a syntax error if the provided string is invalid JSON. Now, we can easily turn this JSON string into a JavaScript object using the JSON.parse() function and access individual data using the dot notation (.)

Example

<!DOCTYPE html>
<html>
<body>

<h1>Parsing JSON Data</h1>

<script>
    var user = '{"name": "Peter", "age": 26}';

    var result = JSON.parse(user);
    document.write(result.name + "<br>" + result.age)
</script>

</body>
</html>

Preview

Parsing Nested JSON Data in JavaScript

Parsing nested JSON data in JavaScript involves accessing properties of objects within objects or arrays within objects. Both JSON objects and arrays support nesting. A JSON object may arbitrarily include arrays, nested arrays, JSON object arrays, and other types of data.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Parse Nested JSON Data</h1>

<script>
    var emp = `{
        "employees": {
            "name": "Erin Barnes",
            "age": 26,
            "lang": ["HTML", "CSS", "JavaScript"],
            "exp": {
                "CompanyName1": "2 year", "CompanyName2": "1 Year"
            }
        }
    }`;
    var result = JSON.parse(emp);
    document.write(result["employees"]["name"] + "<br>" );
    document.write(result["employees"]["age"] + "<br>" );
    document.write(result["employees"]["lang"][2] + "<br>");
    document.write(result["employees"]["exp"]["CompanyName1"]);
</script>

</body>
</html>

Preview

Encoding Data as JSON in JavaScript

To encode data as JSON in JavaScript, you can use the JSON.stringify() method. This method takes a JavaScript object as input and returns a JSON string that represents the data in the object.

Stringify a JavaScript Object

To stringify a JavaScript object, you can use the JSON.stringify() method. This method takes a JavaScript object as input and returns a JSON string that represents the data in the object.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Stringify a JavaScript Object</h1>

<script>
    var user = {"name": "Peter", "age": 26};

    var result = JSON.stringify(user);
    document.write(result)
</script>

</body>
</html>

Preview

Stringify a JavaScript Array

To stringify a JavaScript array, you can use the JSON.stringify() method. This method takes a JavaScript array as input and returns a JSON string that represents the data in the array.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Stringify a JavaScript Array</h1>

<script>
    var lang = ["HTML", "CSS", "JavaScript"];

    var result = JSON.stringify(lang);
    document.write(result)
</script>

</body>
</html>

Preview

JS Modules

JS Debugging

JavaScript JSON

Object

Array

Example

Parsing JSON Data in JavaScript

Example

Parsing Nested JSON Data in JavaScript

Example

Encoding Data as JSON in JavaScript

Stringify a JavaScript Object

Example

Stringify a JavaScript Array

Example

Links

Tutorials

Connect with us