Json Tutorial for beginners

What does it stand for?
JavaScript Object Notation.

And what does that mean?

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

Here’s a tiny scrap of JSON:

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

You got that? So you’d recognise some JSON if you saw it now? Basically:
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

Think ‘XML with Anorexia’

(Or if you’re as old as me, think “‘.INI’ files, with hierarchy.”)

(Or if you’re a smug lisp weenie, think “S-expressions”, and just be smug.)
JSON 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

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.

Again, when you’re writing ajax stuff, which looks easier? the XML approach or the JSON approach:
The XML approach:

1. bring back an XML document
2. loop through it, extracting values from it
3. do something with those values, etc,

versus
The JSON approach:

1. bring back a JSON string.
2. ‘eval’ the JSON

So this is Object-Oriented huh?

Nah, not strictly.

JSON is about as object oriented as VB6. It provides a nice encapsulation technique, that you can use for separating values and functions out, but it doesn’t provide anything inheritence, polymorphism, interfaces, or OO goodness like that.

It is certainly a step in the right direction though, making javascript easier to maintain, share and reuse.

Thomas Frank wrote a nifty little javascript library called classyJSON for adding inheritance and scoping capabilities to JSON code.
And it’s just for the client-side right?

Yes and no. On the server-side you can easily serialize/deserialize your objects to/from JSON. For .net programmers you can use libraries like Json.net to do this automatically for you (using reflection i assume), or you can generate your own custom code to perform it even faster on a case by case basis.

If you like the post & want to get more then Subscribe our blog posts. Subscribe SunwareTech.net RSS Feed Facebook Twitter Email

Both comments and pings are currently closed.

18 Responses to “Json Tutorial for beginners”

  1. uniline365 says:

    That was a very informative write up. Thank you very much for sharing them with us.

  2. Hey, nice post, very well written. You should post more about this. I’ll certainly be subscribing.

  3. Robert says:

    Very good material! I have been searching for something similar to this for a little bit now. Thank you!

  4. Baby Store says:

    Great post.. i am actually taking some of these into consideration

  5. ?? says:

    Letter of credit information agencies, and professional services grasping evil, for you do expose derailed and immoral act of a third party to help you successfully seek justice for rape caught!

  6. LV Handbags says:

    This is a really good read for me. Must agree that you are one of the best bloggers I ever saw. Thanks for posting this useful publish….

  7. I enjoy that you place superlative content out that is clear and well-written.

  8. landscaping says:

    I’m getting a browser error, is anyone else?

  9. AT LAST!!
    Just came to this post from Google, and not gunna lie, it’s totally brilliant – JUST what i’ve been trying to look for!

    Hope you’re going to keep this blog updated – i’ve just bookmarked it so we can check back soon 😀

    Thank you again mate – sorry if the post doesn’t make much sense, i’m Spanish natively so trying to improve my english so THANK YOU!

  10. Fred says:

    That’s a great article.

  11. Dilip Gajera says:

    thanks a lot..

  12. e-ticaret says:

    Great site. A lot of useful info here. I am sending it to a few buddies ans also sharing in delicious. And obviously, thank you to your effort!

  13. I am no longer positive where you’re getting your information, but great topic. I needs to spend some time learning much more or working out more. Thanks for magnificent information I was on the lookout for this info for my mission.

  14. Bujji says:

    Thanks alot……really it’s very useful for beginners.

  15. tandblekninng med laser says:

    tandblekninng med laser…

    […]u Aw, this was a really nice post. In idea I would like to put in writing lik ne[…]…

  16. Ashok says:

    Concise and insightful.

  17. e-ticaret says:

    you’re truly a just right webmaster. The website loading speed is incredible. It sort of feels that you’re doing any unique trick. Moreover, The contents are masterwork. you’ve done a great job on this topic!

  18. Arun says:

    Thanks a lot for this lucid explanation! This certainly helps to demystify JSON.

Copyright © Sunware Technologies - Your web partner