JSON Quick Tutorial

More details: Please refer to DEMO below

[DEMO]

Question: What is JSON?

JavaScript Object Notation. JSON is a syntax for passing around objects that contain name/value pairs, arrays and other objects.

Question: What does look like?

{"skillz": {
	"web":[
		{"name": "html",
		 "years": "5"
		},
		{"name": "css",
		 "years": "3"
		}]
	"database":[
		{"name": "sql",
		 "years": "7"
		}]
}}

Question: What does above JSON mean?

I have skills including web and database. For web skills, I did html and had 5 years experience. For database, I did sql and had 7 years experience.

Question: What do these operations represent accordingly?

Squiggles, Squares, Colons and Commas

  1. Squiggly brackets act as ‘containers’
  2. Square brackets holds arrays
  3. Names and values are separated by a colon.
  4. Array elements are separated by commas

Question:  Is JSON like XML?

Yes and No.

SON is like XML because:

  1. They are both ‘self-describing’ meaning that values are named, and thus ‘human readable’
  2. Both are hierarchical. (i.e. You can have values within values.)
  3. Both can be parsed and used by lots of programming languages
  4. Both can be passed around using AJAX (i.e. httpWebRequest)

JSON is UNlike XML because:

  1. XML uses angle brackets, with a tag name at the start and end of an element: JSON uses squiggly brackets with the name only at the beginning of the element.
  2. JSON is less verbose so it’s definitely quicker for humans to write, and probably quicker for us to read.
  3. JSON can be parsed trivially using the eval() procedure in JavaScript
  4. JSON includes arrays {where each element doesn’t have a name of its own}
  5. In XML you can use any name you want for an element, in JSON you can’t use reserved words from javascript

Question: But Why? What’s good about it?

When you’re writing ajax stuff, if you use JSON, then you avoid hand-writing xml. This is quicker.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s