JSON Parsing In JavaScript. What You Should Know About It

In this article let’s learn about JSON parsing in JavaScript. JSON means – JavaScript Object Notation. JSON is a data-interchange format for data exchange between server and client which is quick and easy to parse and generate.

Just like XML, JSON is a text-based format that is super easy to write and understand for us humans and computers. But in comparison to XML, JSON takes less bandwidth. JSON is based on two basic structures:

• Object: This is an unordered collection of key/value pairs. Each object begins with a left curly bracket { and ends with a right curly bracket }. Multiple key/value pairs are separated by a comma ,.
• Array: This is an ordered list of values. An array begins with a left bracket [ and ends with a right bracket ]. Values are separated by a comma ,.

In JSON property names or keys are always strings and the value can be a string, number, true or false, null or an object, or an array. Here’s how the JSON object looks:

{
    "person": {

        "name": "Paul DC",
        "year": 1990,
        "gender": "male"
    }
}

Here is what the JSON array looks like:

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

How To Parse JSON Data In JavaScript

In JavaScript, you can simply parse JSON data from the web server using the JSON.parse() method. This method parses a JSON string and constructs the JavaScript value or object described by the string. If the given string is not valid JSON, you will get a syntax error. Here’s an example:

let json = '{"name": "Paul", "age": 31, "country": "Any"}';

// Converting JSON-encoded string to JS object
let obj = JSON.parse(json);

// Accessing individual value from JS object
console.log(obj.name); // Result: Paul
console.log(obj.age); // Result: 31
console.log(obj.country); // Result: Any

How To Parse Nested JSON Data In JavaScript

JSON objects and arrays can also be nested. A JSON object can contain other JSON objects, arrays, nested arrays, arrays of JSON objects, etc. Here’s an example for you:

let json = `{
    "person": {
        "name": "Paul DC",
        "year": 1990,
        "hobby": ["Photography", "Coding", "Blogging"],
        "location": {
           "city": London,
           "country": UK 
        }
    }
}`;

// Converting JSON object to JS object
let obj = JSON.parse(json);

console.log(obj["person"]["name"]);  // Result: Paul DC
console.log(obj["person"]["hobby"][0]);  // Result: Photography 

How To Encode Data As JSON In JavaScript

Sometimes JavaScript objects or values from your code need to be transferred to the server. JavaScript provides JSON.stringify() method which converts a JavaScript value to a JSON string. Here’s how it looks :

// Sample JS object
let obj = {"name": "Paul", "age": 31, "country": "Any"};

// Converting JS object to JSON string
let json = JSON.stringify(obj);
console.log(json);

Or if you need to convert an array to JSON:

// Sample JS array
let arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Converting JS array to JSON string
let json = JSON.stringify(arr);
console.log(json);

Last time we learned about JavaScript strict mode, you can find this article here. Or if you want to learn about JSON parsing in PHP, you can find the article here.