• library_books today Apr 9, 2016
    • Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

Why Do We Need JSON Data

Why Do We Need JSON

The JSON stands for JavaScript Object Notation. It allows developers to play with data using JavaScript and its frameworks like jQuery. As per the current trend, JSON is one of the popular data mediator recommended by developers. Hence we can see rapid growth of non-relational databases like MongoDB and BigData.

JSON is useful to store and retrieve data. JSON comes in picture, when we have iterative set of data to be displayed (i.e.: long list of users, products, etc.). JSON file allows us to store data in KEY and VALUE pair. And those set of pairs infect be used as an output for HTML web pages in a browser.

Once you become familiar with JSON, you would find no other easy way around to create prototypes for web projects. You would define data set and JavaScript for a single time and the rest will keep updating HTML page, while you update/delete/add the data to JSON file. Pretty much interesting! Right?

I started using JSON for my client projects. And they are very happy because now they don't have to deal with HTML to update the data.

Where We Can Use JSON

Assume a simple corporate website, where you have a company page with team members (around 50 members). In such a scenario, we need to repeat the same HTML code (below snippet) for 50 times, which would make our HTML real messy. Isn't it weird?

Below HTML code will responsible display one team member on a webpage:

<div class="user-thumb">
    <div class="img-wrapper">
        <img src="pathToImg/user-img.png" alt="User Name">
    <div class="user-title">
        Kushal Jayswal

So, what can we do here to minimize the iterative HTML code? As a solution, we can create a JSON file in which, we can put all the data related to team members as per below sample code. As mentioned above, JSON needs to be stored in format of KEY & VALUE. In example below, name, designation and img are keys for respective data values. And the "teams" is an array object having number of pairs as a data.

I am sure that above description would clear your mind behind JSON and If not! You should put your query in comment section.

    "teams": [{
        "name": "Kushal Jayswal",
        "designation": "Founder of TeckStak.com",
        "img": "path-to-image/user-img-1.png"
        "name": "Manish Sharma",
        "designation": "Front End Ninja",
        "img": "path-to-image/user-img-2.png"

How We Can Traverse JSON Data

Traversing JSON data needs a logic, for what to be retrieved from the JSON file. In short, we need a medium that can order JSON file to fetch data and display the same on an HTML web page.

HTML Code required to show JSON Data

As the best practice in JavaScript, while we need some functionality for any specific element, we use ID over that element/tag, as a reference for scripting purpose. The same way, we would define a blank div having id=team on it (and put relevant classes if required for styling purpose).

<div id="team" class="team-grid clearfix"></div>

jQuery Code that gets data from .json file

$.getJSON('teams.json', function (data) {
    $.each(data.teams, function(i) {
        var pointTo = data.teams[i],
            col = $('<div class="col" />'),
            userImg = $('<img src="'+ pointTo.img +'">'),
            userName = $('<h3>'+ pointTo.name +'</h3>'),
            userDesignation = $('<p>'+ pointTo.designation +'</p>');

As you can see in above snippet, we have defined different variables and pointTo refers directly to the data in .json file. Also we have teams object having number of people.


Here I have created a quick demo but might not be understood at the fullest by some of you. I have a plan to publish one more post focusing on traversing json data. So keep visiting us.

Also published on Medium.