Home >Blog

JSON Overview

JSON stands for JavaScript Object Notation and is a popular data-interchange format. The simplest way to define JSON is that it is a lightweight format for creating objects that is part of and built into JavaScript. JSON's popularity has been steadily growing while becoming the main competitor to XML in popularity and usage. JSON can work well with most of the other modern programming languages because JSON is language independent. The structure of JSON is just same with other languages thus it is easier to execute changes such as changing the server side language and the like.

Let’s talk a little about the history of JSON. Douglas Crockford is the one who specified the format of JSON and popularized the structure around 2001. JSON acronym was coined at State Software, a company co-founded by Crockford.

JSON has many features that makes it convenient. The main feature of JSON that really makes it attractive is the data size and also that the structure tagging method is more compact. For programmers that are already sick of writing parsers, JSON can help with that too.

What is JSON good for?

JSON is primarily helpful for transmitting data between a server and a web application, serving as an alternative to XML. It is also often used for serializing structured data over a network connection.

In fact, JSON is really indented to be ideal for client side development. It is very easy to think that the JSON phenomenon brings a huge impact to transferring data between software components.

Here are some of the advantages and reasons why JSON is popular and good for you:

JSON is more compact and easier to work with some of the languages (such as Python, PHP, and JavaScript)
JSON format is generally more specified and easier to read, making it a good alternative for when you want to send plain and simple data
JSON can be easily perceive between any single items and collections
JSON is also human readable and easy to parse
JSON is text-based and position-independent

Examples and Code Snippets

Check below for some JSON examples and code snippets. We'll assume that you already know how JavaScript works—how to write simple scripts and run them through the web. The scenario will be like this:

First, we will create a variable called ‘joy’ which holds the data, and then we will use JSON to define our object. See the example below.

<script>
    var joy={ "firstName" : "Chicken"}
    alert(joy.firstName);
</script>

As you can see, the sample code you have seen above, is as simple as it gets. It is just one variable called ‘joy’ that has been initialized by data called ‘firstName’ and then the ‘Chicken' is a value that is stored using the variable. After that it’s, being displayed using the alert function.

Basically, JSON is considered as a fragment or let's say a subset of JavaScript syntax. These guidelines are for you to know a little about the basic and simple format of JSON. So, let’s have a very quick look at the basic syntax of JSON.

This includes the following:

JSON code is inserted inside the <script> tag, but some create another file for it with the filename extension ‘.json’. (but let’s not tackle that one let's just yet—the simplest way to use JSON is inside the script tag)
When declaring a name or value it should be inside the curly braces

Same as the example above.

Do not ever forget to use ‘:’ (comma) to separate the name or values
Arrays are inside a square brackets

Let’s have another look at an example of JSON but this time, we will try something more complex and realistic.

The following is an example of JSON while using an array.

{"Pupils":[

    {"firstName":"Sara", "lastName":"Jay"},

    {"firstName":"Stephany", "lastName":"Howard"},

    {"firstName":"Chan", "lastName":"Tim"}

]}

You can easily distinguish the example code as having an array since square brackets are being used.

Now, let’s have a look at what it will look like inside a web page using JSON.parse.

<!DOCTYPE html>
<html>
<body> 
  <h2>JSON Object</h2> 
  <p id="sample"></p> 
  
  <script>
   var data= '{"firstname":"Stephen Blake","street":"1135 Quezon City","phone":"0912345678"}';

   var obj = JSON.parse(data);

   document.getElementById("sample").innerHTML =

   obj.firstname + "<br>" +

   obj.street + "<br>" +

   obj.phone;
  </script> 

</body>
</html>

The output of the above example will look like this.

JSON Object

Stephen Blake

1135 Quezon City

0912345678

JSON is great right? That is how JSON works for you. JSON is faster and easier to understand. No more worries.

Conclusion

As the technology grows and we see more and more AJAX-powered sites, it is becoming increasingly important for sites to be able to load data fast and without delays. It is a great factor for a site that the contents of a certain element should not require the user to refresh the page, not to mention the added inconvenience this would put on the user. Aside from that, when you are writing AJAX code, if you use JSON, then you avoid hand-writing xml. That is how life is when using JSON. The JSON phenomenon has greatly affected developers' lives in respect to creating web sites or other applications and as we know these are the things that really affects people's everyday lives. So, why not take some time and get familiar with JSON, a great way to write better code.

By Alvie Amar | 6/6/2016 | General