How does JSON.parse() work?

Question

I have not worked too much on javascript. And, I need to parse a JSON string. So, I want to know what exactly JSON.parse does. For example : If I assign a json string to a variable like this,

var ab = {"name":"abcd", "details":{"address":"pqrst", "Phone":1234567890}};

Now when I print 'ab', I get an object.

Similarly when I do this :

var pq = '{"name":"abcd", "details":{"address":"pqrst", "Phone":1234567890}}';
var rs = JSON.parse(pq);

The 'rs' is the same object as 'ab'. So what is the difference in two approaches and what does JSON.parse did differently ?

This might be a silly question. But it would be helpful if anybody can explain this.

Thanks.

Answer 1

Here is my explanation with a jsfiddle .

//this is already a valid javascript object
//no need for you to use JSON.parse()
var obj1 = {"name":"abcd", "details":"1234"};
console.log(obj1);

//assume you want to pass a json* in your code with an ajax request
//you will receive a string formatted like a javascript object
var str1 = '{"name":"abcd", "details":"1234"}';
console.log(str1);

//in your code you probably want to treat it as an object
//so in order to do so you will use JSON.parse(), which will
//parse the string into a javascript object
var obj2 = JSON.parse(str1);
console.log(obj2);

JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

Answer 2

A Javascript object is a data type in Javascript - it's have property and value pair as you define in your first example.

var ab = {"name":"abcd", "details":{"address":"pqrst", "Phone":1234567890}};

Now What is Json : A JSON string is a data interchange format - it is nothing more than a bunch of characters formatted a particular way (in order for different programs to communicate with each other)

var pq = '{"name":"abcd", "details":{"address":"pqrst", "Phone":1234567890}}';

so it's is a String With json Format.

and at last JSON.parse() Returns the Object corresponding to the given JSON text.

Answer 3

Your 'ab' variable isn't a string, it is a proper javascript object, since you used the {} around it. If you encased the whole thing in "" then it would be a string and would print out as a single line.

Answer 4

Data Type!! That is the answer. In this case, ab is an object while pq is a string (vaguely speaking). Print is just an operation that displays 'anything' as a string. However, you have to look at the two differently. String itself is an object which has properties and methods associated with it. In this case, pq is like an object which has a value: {"name":"abcd", "details":{"address":"pqrst", "Phone":1234567890}} and for example, it has a property called length whose value is 66. But ab is an object and you can look at name and details as its properties.

What JSON.parse() did differently was that, it parsed (converted) that string into an object. Not all strings can be parsed into objects. Try passing {"name":"abc" and JSON.parse will throw an exception.

Before parsing, pq did not have any property name . If you did something like pq.name , it'll return you undefined . But when you parsed it using JSON.parse() then rs.name will return the string "abcd". But rs will not have the property length anymore because it is not a string. If you tried rs.length then you'll get a value undefined.