JavaScript – JSON

As client-side or server-side developer, you indeed have to be good when it comes to work with JSON. This is another important concept we have to deal with, before diving more in other concepts.

Nowadays a lot of what we are using when we are surfing the web is dealing with data, exchanging data with others, using social networks, blogs, websites, ….
Very much of what we are using is based on exchanging data, and one of a simple data format we can use to transfer a pieces of data from point to another point is called JSON.

JSON inspired by JavaScript “Object Literal” Syntax.

And it looks an awful lot like “Object Literal” Syntax, but the common mistake is to think that they’re the exact same thing as JavaScript Object Literal syntax, thus causes us to run across errors.

Let’s begin with how JavaScript Object Literal is presented:

Now look at the next line of codes:

Did you notice the difference between the objects jsObjectLiteral_2 and jsObjectLiteral_1 ?
Look again and you will see the properties name(fName, isAProgrammer, yearsOfExperience) in the second Object jsObjectLiteral_2 wrapped by double quotes ” “.
And this is also another way to write valid JavaScript Object.

The special thing in the second style of writing a JavaScript Object using properties name wrapped by quotes, in that it’s the same as JSON.

There are special functions in JavaScript to deal with JSON, and they are JavaScript built-in functions.
JSON.stringify is one of them used for converting JavaScript Object to JSON:

When you run the above code, your program will paused at “debugger” line, so look at the json_1 variable data and you will see that it’s wrapped by quotes outside the brackets, because it’s converted to JSON String like this:

The second built-in function is JSON.parse, that able to convert JSON to a JavaScript Object, an example below:

By watching the variables above using chrome developer tools(F-12 ==> sources ==> scope label), you will get:

Beside that, you need to avoid writing functions into JavaScript Object when converting it to JSON.
In the simple program bellow we will use JSON.stringify and JSON.parse, and see what will happen if we convert a JavaScript Object containing a function inside of it to JSON :

Now look at the data inside of the two Objects: jsObject and jsonStrConvertedToObject :

Did you notice that there is no function sayHello inside the second Object jsonStrConvertedToObject, and this illegal syntax because JSON can not contain function call.Look at the official JSON Syntax.

Here is another case to avoid:

Again you will not see the fname name property in the jsonConvertedToObject, see the picture below :

And this occurred because we used undefined keyword as value.

Summary
  1. JSON looks like Object Literal Syntax except for some differences
  2. Anything that is valid JSON is also valid JavaScript Object Literal Syntax, but not all Object Literal Syntax is valid JSON.
  3. JSON is more strict and requires double quotes ” “ around the names, and it doesn’t let you put functions or undefined as values and you also can not put comments.
  4. JSON made for a really easy transition when sending data from one point to another, JSON very useful when you are using AJAX, and it can be used in servers like Node.js, PHP, ….

I hope you enjoyed reading about JSON.
Comments are very welcome.
Thanks 🙂

mhmd

Hello, I'm Mohammad Daka, software engineer who love coding. In my spare time I blogs about JavaScript,PHP, Chrome Extensions, helpful resources and tools, I'm also working on my own projects. Don't hesitate to contact me at my twitter account: @mohammad_daka :)

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *