This is an introductory tutorial on JSON - JavaScript Object Notation. As a web developer, you will find plenty of occassion when you will require applying or working with JSON in your project. This tutorial begins a set of tutorials on JSON and discusses definition, specification, What JSON looks like in real world, a bit of History of JSON, comparison between Relational Database and JSON, a brief understanding of when to elect JSON over Relational Database, XML vs JSON, Syntax of JSON, typical examples of real world uses of JSON.
The document ends with a list of what you will learn in other tutorials of this series, which is sort of a roadmap of basic things you need to learn for working with JSON and a summary of the points discussed.
Ultimately, JSON is used as a data model, but compared to other data models like Relational Database or XML, it has a low learning curve. In fact, if you are familiar with any of the modern day programming language (e.g PHP, JavaScript, Ruby) you are already familiar with the data structures used in JSON. Moreover, any modern programming language can work with JSON. May be that is why JSON has got wide acceptance from the developer community. The following visual representation from Google Trend may help you to understand the how JSON is gaining popularity over years.
What is JSONJSON is a lightweight text-based open standard data-interchange format. It is human readable. JSON is derived from a subset of JavaScript programming language (Standard ECMA-262 3rd Edition—December 1999). It is entirely language independent and can be used with most of the modern programming languages.
JSON is often used to serialize and transfer data over a network connection, for example between the web server and a web application. In computer science, serialization is a process to transforming data structures and objects in a format suitable to be stored in a file or memory buffer or transmitted over a network connection. Later on, this data can be retrieved. Because of the very nature of the JSON, it is useful for storing or representing semi structured data
JSON is a standard and is specified on RFC4627 on IETF (International Engineering Task Force). The specification is made by Doglus Crockford on July 2006.
JSON files are saved with .json extension. Internet media type of JSON is "application/json".
What JSON looks likeWe will now look how a typical JSON looks like. The following code snippet is a valid (you will see in a later chapter what is syntactically valid JSON) JSON representing information about a book.
{
"Title": "The Cuckoo's Calling",
"Author": "Robert Galbraith",
"Genre": "classic crime novel",
"Detail": {
"Publisher": "Little Brown",
"Publication_Year": 2013,
"ISBN-13": 9781408704004,
"Language": "English",
"Pages": 494
},
"Price": [
{
"type": "Hardcover",
"price": 16.65
},
{
"type": "Kidle Edition",
"price": 7.03
}
]
}
Now we will discuss what are basic constructs of JSON.
Basic ConstructsThe following image and then text following will be useful to get you started with how JSON data is constructed.
So the entire content of the JSON data shown above is enclosed within an object. "Title": "The Cuckoo's Calling", "Author": "Robert Galbraith", "Genre": "classic crime novel", these are label-value pairs separated by commas. Labels and their values are separated by a colon (:). Notice that both labels and values are enclosed by quotations, since they are strings.
Notice the '"Detail"' label then. It contains another object, which again contains several label-value pairs. This is an example of how nesting (object within object in this case) is done in JSON.
Then '"Price"' label contains an array, which is turn contains two separate objects. Another example of nesting.
Also, notice that numbers are not enclosed by quotations.
History of JSONThe name behind popularizing the JSON is Douglas Crockford. He used JSON is his company State Software around 2001.
In 2005, Yahoo started using JSON in it's web services.
In later 2006, Google started offering JSON in its Gdata web protocol.
Today, JSON is one of the most widely used data-interchange format in web, and supported by most of the Web APIs (like twitter api) to fetch public data and creating applications out of them.
Comparison with Relational DatabaseSince JSON is used to host/represent data, we will discuss how it is different from the traditional Relational Database model used in RDBMS systems like MySQL, SQL Server etc. This may be useful for you to choose JSON over RDBMS or RDBMS over JSON depending upon the type and structure of data you want to deal with. Let's start with a comparison against certain features:
Now let's discuss a few use cases which will be useful.
Assume that you have to store information regarding students(name, id, class) and marks obtained by them in various subjects. Relational Database is suitable here than using JSON, since here we can have one table containing student detail and another table for marks obtained by them in various subjects.
Now assume that we have to represent information regarding students(name, id, class) and various projects they have completed in different subjects along with a brief description of the project. Assume that a student may complete any number of projects and any of number subjects they choose from. Notice that, in this case, you may have any uniformity of the data to be stored. So, in this case, JSON will be preferable than using Relational Database.
JSON vs XMLSince XML is also used as data interchange format widely, we will try to draw a comparison between them. The purpose of the comparison it's definitely not in the line of which is better, rather we will try to understand which one is suitable for storing specific kind of data.
API : API is the most widely used area where JSON is used for data exchange. Specially, web applications those have a social face, it has become obvious now that they have an API, so that developers can consume the huge amount of data collected by the app and then can create derivative apps. Twitter, Facebook, Linkedin, Flicker, Dribble, you name it, all the well-known apps on the internet today has an API and uses JSON as their preferred format for serving data to the developers. Out of these APIs, some have support for both JSON and XML, but some support only JSON.
We will see a simple demonstration of rottentomatoes API to get a feel of how JSON is used in APIs. In this demo, we are querying the rottentomatoes.com for name and thumbnail poster of the movie containing the string "Life is beautiful" using JavaScript and Jquery. It returns the result in JSON format and then it is displayed on the browser. Following is a screenshot of it.
NoSQL : This is another area where JSON is used. NoSQL databases like MongoDb, CouchDb uses JSON format to store data.
Since JSON structures can be transformed to JavaScript objects within the browser environment, it is very easy to work with. Moreover, it can be integrated with server-side JavaScript also. The following shows that in MongoDb, data is stored in JSON format (to be specific, a variant of JSON, called BSON is used). You can learn MongoDb in detail in our separate tutorial for MongoDb.
we select the database first. Our database name is w3r_demo here.
> use w3r_demo
switched to db w3r_demo
Now we will insert some data into the collection (like a table in RDBMS) books. The data we are entering is shown at the JSON data example above in this example.
> db.books.save({
"Title": "The Cuckoo's Calling",
"Author": "Robert Galbraith",
"Genre": "classic crime novel",
"Detail": {
"Publisher": "Little Brown",
"Publication_Year": 2013,
"ISBN-13": 9781408704004,
"Language": "English",
"Pages": 494
},
"Price": [
{
"type": "Hardcover",
"price": 16.65
},
{
"type": "Kidle Edition",
"price": 7.03
}
]
}
)
We will select the data insert and display now.
> db.books.find()
{"_id" : ObjectId("51ee7088b63a0c553918fdd3"), "Title": "The Cuckoo's Calling", "Author": "Robert Galbraith", "Genre": "classic crime novel",
"Detail": { "Publisher": "Little Brown", "Publication_Year": 2013, "ISBN-13": 9781408704004, "Language": "English", "Pages": 494},
"Price": [ { "type": "Hardcover", "price": 16.65 }, { "type": "Kidle Edition", "price": 7.03 } ] }
So this way we store data in JSON format in NoSQL database MongoDb.
AJAX : JSON is often used to retrieve data from the server with AJAX. This is suitable because this way, retrieved data is presented to browser environment and then using JavaScript can be manipulated and rendered.
In the following demo, we are using Jquery and AJAX to fetch the most recent 5 photographs of cats from Flicker. We can view a live demo here. And following is a screenshot.
Package Management : Since the complexity of web development has increased a lot, developers nowadays use tools to create a package of their application. That makes the app more easily deployable and later on it is also become easy to make modifications and integrate the changes. This way, the development and maintenance process becomes easier. There are number of package management tools are available, namely Bower, Yomen , NPM (Node Package Manager) etc. Most of these tools use a package.json file where the metadata (like name, version, description, file structure, dependencies, license information etc) are written.
Bellow is the package.json file from Twitter Bootstrap.
{
"name": "bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
, "version": "2.3.2"
, "keywords": ["bootstrap", "css"]
, "homepage": "http://twitter.github.com/bootstrap/"
, "author": "Twitter Inc."
, "scripts": { "test": "make test" }
, "repository": {
"type": "git"
, "url": "https://github.com/twitter/bootstrap.git"
}
, "licenses": [
{
"type": "Apache-2.0"
, "url": "http://www.apache.org/licenses/LICENSE-2.0"
}
]
, "devDependencies": {
"uglify-js": "1.3.4"
, "jshint": "0.9.1"
, "recess": "1.1.8"
, "connect": "2.1.3"
, "hogan.js": "2.0.0"
}
}
So, you already might have an idea of how JSON is being used in real world and will be useful for you to learn JSON well, so that you can use it in your own projects.
What you will learn in JSON tutorials of w3resourceHere is a brief rundown of the tutorials you will come across in our series of JSON tutorials.
It will be a good idea to have a quick recap of what we have learned in this introductory tutorial of JSON. here we go-
Hopefully, this tutorial sets the ground well to start learning JSON through our consequent tutorials. By the way, we are in the process of going through the major update of our present JSON tutorials, more useful content is going to be added to serve a better and improved learning material to our users. Subscribe to our RSS Feed to stay updated.
Next: Structures of JSON
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4