JSON In a Nutshell

Storing and exchanging data especially between a server and web application is a major practice for most of the developers and even beginners. XML has been on the scene for several years, But there is an alternative solution called “JSON”.

Omar Elgabry
Sep 13, 2016 · 7 min read

Getting Started

Make sure that you are comfortable with JavaScript basic syntax.

1. What’s JSON?!

JSON is stands for “JavaScript Object Notation”, It’s used to store and exchange data as an alternative solution for XML. JSON is easier to parse, quicker to read and write. JSON sytnax is based on JavaScript Object Literals, But it’s a text format.

2. JSON Syntax

JSON syntax format is based on two main structures; Objects and Arrays. An Object is a collection of name/value pairs, and Array is an ordered list of values.

Object Declaration

{ 
"id": 4911,
"firstName":"John",
"lastName":"Walter",
"isStudent": true
};
  • It starts with the left curly brackets ‘{‘ and ends with right curly brackets ‘}’
  • Each name in the Object is a string in double quotation, and it’s followed by colon ‘:’ then the value associated with that name.
  • name/value pairs are separated by comma ‘,’

Array Declaration

[
"Belgium", "Brazil", "Cameroon", "Canada", "Chile", "Denmark"
]
  • It starts with the left bracket ‘[‘ and ends with right brackets ‘]’
  • Values are separated by comma ‘,’

3. JSON Values

Whether you are going to use Object or Arrays, both contain values, and here is the list of all values that can be presented in JSON data:

  1. a number
  2. boolean; true or false
  3. null
  4. an object
  5. an array

3. Putting All Together — Facebook API

If you decided one day to retrieve some data from Facebook, like the posts of your Facebook page, or searching for all posts that has a specific keyword, chances are you will be receiving JSON data that will be parsed to a JavaScript Object.

1. JSON data

For simplicity, I will be using a file with type ‘.json’(The file type for JSON files), It contains the JSON data. But, you can make an Ajax call for example to a URL expecting a JSON data.

{
"data": [
{
"id": "X12",
"from": {
"name": "John Kennedy", "id": "1458633"
},
"message": "JSON is much easier and better than XML",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/X999/posts/Y999"
},
{
"name": "Like",
"link": "http://www.facebook.com/X999/posts/Y999"
}
],
"type": "status",
"created_time": "2010-08-02T22:27:44+0000",
"updated_time": "2010-08-02T22:27:44+0000"
},
{
"id": "X45",
"from": {
"name": "Anna Smith", "id": "12587521"
},
"message": "On my way to write my very first JSON snippet",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/X998/posts/Y998"
},
{
"name": "Like",
"link": "http://www.facebook.com/X998/posts/Y998"
}
],
"type": "status",
"created_time": "2010-08-02T25:27:44+0000",
"updated_time": "2010-08-02T25:27:44+0000"
}
]
}

2. Ajax Call

In order to get the JSON data, we need to send an Ajax request,

$.getJSON( "facebook.json", successFn);

3. Loop through JSON data

Intro

Storing and exchanging data especially between a server and web application is a major practice for most of the developers and even beginners. XML has been on the scene for several years, But there is an alternative solution called “JSON”.

Setting Up the Environment

Make sure that you are comfortable with JavaScript basic syntax.

1. What’s JSON?!

JSON is stands for “JavaScript Object Notation”, It’s used to store and exchange data as an alternative solution for XML. JSON is easier to parse, quicker to read and write. JSON sytnax is based on JavaScript, But it’s a text format.

2. JSON Syntax

JSON syntax is based on two main structures, Objects and Arrays. An Object is a collection of name/value pairs, and Array is an ordered list of values.

Object Declaration

{ 
"id": 4911,
"firstName":"John",
"lastName":"Walter",
"isStudent": true
};
  • It starts with the left curly brackets ‘{‘ and ends with right curly brackets ‘}’
  • Each name in the Object is a string in double quotation, and it’s followed by colon ‘:’ then the value associated with that name.
  • name/value pairs are separated by comma ‘,’

Array Declaration

[
"Belgium", "Brazil", "Cameroon", "Canada", "Chile", "Denmark"
]
  • It starts with the left bracket ‘[‘ and ends with right brackets ‘]’
  • Values are separated by comma ‘,’

3. JSON Values

Whether you are going to use Object or Arrays, both contain values, and here is the list of all values that can be presented in JSON data:

  1. a number, or
  2. boolean; true or false, or
  3. null, or
  4. an object, or
  5. an array

3. Putting All Together — Facebook API

If you decided one day to retrieve some data from facebook, like the posts of your facebook page, or searching for all posts that has a specific keyword, chances are you will be receiving JSON data that will be parsed to a JavaScript Object.

1. JSON data

For simplicity, I will be using a file with type ‘.json’(The file type for JSON files), It contains the JSON data. But, you can make an Ajax call for example to a URL expecting a JSON data.

{
"data": [
{
"id": "X12",
"from": {
"name": "John Kennedy", "id": "1458633"
},
"message": "JSON is much easier and better than XML",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/X999/posts/Y999"
},
{
"name": "Like",
"link": "http://www.facebook.com/X999/posts/Y999"
}
],
"type": "status",
"created_time": "2010-08-02T22:27:44+0000",
"updated_time": "2010-08-02T22:27:44+0000"
},
{
"id": "X45",
"from": {
"name": "Anna Smith", "id": "12587521"
},
"message": "On my way to write my very first JSON snippet",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/X998/posts/Y998"
},
{
"name": "Like",
"link": "http://www.facebook.com/X998/posts/Y998"
}
],
"type": "status",
"created_time": "2010-08-02T25:27:44+0000",
"updated_time": "2010-08-02T25:27:44+0000"
}
]
}

2. Ajax Call

In order to get the JSON data, we need to send an Ajax request,

$.getJSON( "facebookData.json",successFn);

3. Loop through JSON data

function successFn(jsonData,status, xhr){
// facebookPosts is an array, same as "data" in json file.
var facebookPosts = jsonData.data;
for (var i=0; i < facebookPosts.length; i++){ var id = facebookPosts[i].id;
var from = facebookPosts[i].from.name;
var msg = facebookPosts[i].message;
var type = facebookPosts[i].type;
var firstAction = facebookPosts[i].actions[0].name;

console.log(from+ " of ID: "+id+" wrote: "+msg+" as a "+type);
// John Kennedy of ID: X12 wrote: JSON is much easier and better than XML as a status
// Anna Smith of ID: X45 wrote: On my way to write my very first JSON snippet as a status
}

}

Download the code snippet, and share if you find it useful.

OmarElgabry's Blog

This is my freedom area.

Omar Elgabry

Written by

Software Engineer. Going to the moon 🌑. When I die, turn my blog into a story.

OmarElgabry's Blog

This is my freedom area. Don't underestimate it. The devil is in the detail.

Omar Elgabry

Written by

Software Engineer. Going to the moon 🌑. When I die, turn my blog into a story.

OmarElgabry's Blog

This is my freedom area. Don't underestimate it. The devil is in the detail.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store