JSON Parsing In JavaScript. What You Should Know About It

Posted by TotalDC

JSON means – JavaScript Object Notation. JSON is 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 for 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 JSON object looks:

{
    "person": {

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

And here what 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 and 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

Parsing 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 object or value 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 article here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: