Pinterest Stumbleupon Whatsapp
Ads by Google

Are you caught up with the latest web technologies? Knowledge of HTML Not Just For Developers: 7 HTML Tags Any Writer Should Know Not Just For Developers: 7 HTML Tags Any Writer Should Know To be marketable and flexible online, you just have to know how to format a full HTML article, or how to tweak things. Read More is pretty much essential if you want to go beyond simple web activities like browsing and posting on forums.  Then there are more advanced topics, like CSS (learn more here 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More ), AJAX (learn more here jQuery Tutorial (Part 5): AJAX Them All! jQuery Tutorial (Part 5): AJAX Them All! As we near the end of our jQuery mini-tutorial series, it's about time we took a more in-depth look at one of the most used features of jQuery. AJAX allows a website to communicate with... Read More ), and JSON.

Whether you plan to be a web developer or not, it’s a good idea to at least know what is JSON, why it’s important, and why it’s used all around the web today.

What Is JSON?

what-is-json-intro

JSON stands for JavaScript Object Notation. It’s an open standard format that allows data to be transferred across the web by using attribute-value pairs. That might sound a bit confusing, so let’s delve into that a little more.

Let’s say I have a balloon and you want my balloon. One way to make that happen would be to actually pack up the balloon and send it to you by mail. But an alternative method would be to describe to you the attributes of my balloon, which would allow you to recreate the same exact balloon without having to actually send the physical balloon.

My balloon might have a material attribute of value rubber. It might have a color attribute of value red. It might have a diameter attribute of value ten inches. It might have a gas attribute of value helium. Those four attribute-value pairs are enough for you to visualize my balloon, right?

Ads by Google

That’s pretty much how JSON works when it transmits data across the Internet.

What Good Is JSON?

what-is-json-diagram

JSON wasn’t the first to utilize attribute-value pairs as a way to transfer data over the Internet. The tech-savvy among you might notice that it sounds an awful lot like XML. Well, as it turns out, JSON and XML perform many of the same tasks. So why pick JSON over XML?

In today’s web, asynchronous loading of data is important. In other words, webpages want to be able to load new data without having to refresh the entire page to get it. This results in a smoother and more favorable browsing experience. JSON is great for sending and receiving asynchronous data because it’s simple and easy to use.

But XML does the same thing! So why do some people prefer JSON?

One answer to that question can be found in JSON’s name: JavaScript Object Notation. It’s recognized natively by JavaScript, which is one of the most popular languages in the world. Since JSON is a subset of JavaScript, there’s very little extra learning you have to do once you know JavaScript.

Another reason is that JSON is more readable than XML. Sure, it’s easy to get used to XML when you’ve used it for a while, but glancing at an XML file can be overwhelming with all of its tags and verbosity. JSON is cleaner, easier for newbies to understand, and quite flexible with its basic data types.

See what JSON’s creators have to say about this comparison over on their JSON vs. XML page.

What Does JSON Look Like?

JSON is just a series of attribute-value pairs which can be nested within themselves when necessary. For example, if our data object was a person, that person could be represented by the following JSON data:

what-is-json-json

Each line starts with an attribute followed by a colon, then the value for that attribute. That value can alos be an array, as seen with the “phoneNumbers” attribute above. The value can also be a series of more attribute-value pairs, which you can see in action with the “address” attribute. This is called an object.

For comparison, here’s the same data represented by XML:

what-is-json-xml

Conclusion

JSON is just a way to represent data objects when transmitting them across the Internet. It’s an alternative to XML that’s native to JavaScript, which is one reason why it’s so popular and widespread. The most common use for JSON is pulling data from web servers on demand.

Hopefully you now have a better understanding of JSON and how it’s used in web development. For further learning, the JSON page on MDN is a great place to start.

Image Credits: JSON Magnified Via Shutterstock

  1. Ramu
    March 1, 2014 at 9:13 am

    One of the best articles for a beginner to learn about JSON.

    • Joel L
      March 3, 2014 at 6:34 pm

      Thanks! I appreciate the feedback. :)

  2. kihara
    February 28, 2014 at 6:40 am

    I like the way you have taken a technical concept and explained it in plain language. Great stuff!

    • Joel L
      February 28, 2014 at 7:24 am

      Thanks Kihara. I appreciate it!

  3. Jason
    February 27, 2014 at 11:26 pm

    If programming were explained in everyday language in the way this article does, there would be a lot more people writing software I'd speculate.

    • Joel L
      February 28, 2014 at 4:30 pm

      Wow, that's high praise! Thank you so much. Glad you liked the article. :)

  4. David A
    February 27, 2014 at 4:53 pm

    "Let’s say I have a balloon and you want my balloon. One way to make that happen would be to actually pack up the balloon and send it to you by mail. But an alternative method would be to describe to you the attributes of my balloon, which would allow you to recreate the same exact balloon without having to actually send the physical balloon."

    You just described the FTD/1-800 Flowers business model.

    • Joel L
      February 28, 2014 at 7:24 am

      Well what do you know, it appears I did!

  5. Melroy D
    February 27, 2014 at 1:42 am

    Very crisp and to the point. It definitely got my attention. Thanks!

  6. Jason T
    February 26, 2014 at 9:44 pm

    search for "alos".

    Great article. (=

    • Melroy D
      February 26, 2014 at 11:19 pm

      grammar nazi.. jk :)

    • Joel L
      February 28, 2014 at 7:23 am

      Ha, thank you very much for catching that. :)

  7. Sakshar T
    February 26, 2014 at 7:41 pm

    Great article. Explanation was in very simple words to understand easily. Thanks.

    • Joel L
      February 28, 2014 at 7:24 am

      Glad it could help you. You're welcome!

Leave a Reply

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