CODE LAB: Understanding JSON

												
{
		"first_name"  :  "Sammy",
		"last_name"   :  "Shark",
		"online"      :  true
}
														

If, instead, you have a JSON object in a .js or .html file, you’ll likely see it set to a variable:

												
var sammy = {
		"first_name": "Sammy",
		"last_name": "Shark",
		"online": true
}
														

Additionally, you may see JSON as a string rather than an object within the context of a JavaScript program file or script. In this case, you may also see it all on one line:

												
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
														

Converting JSON objects into strings can be particularly useful for transporting data in a quick manner.
We’ve gone over the general format of JSON and how you may expect to see it as a .json file, or within JavaScript as an object or a string.

Comparison to JavaScript Object
It is worth keeping in mind that JSON was developed to be used by any programming language, while JavaScript objects can only be worked with directly through the JavaScript programming language.

In terms of syntax, JavaScript objects are similar to JSON, but the keys in JavaScript objects are not strings in quotes. Also, JavaScript objects are less limited in terms of types passed to values, so they can use functions as values.

Let’s look at an example of a JavaScript object of the website user Sammy Shark who is currently online.

												
var user = {
		first_name: "Sammy",
		last_name : "Shark",
		online    : true,
		full_name : function() 
		{
				return this.first_name + " " + this.last_name;
		}
};
														

This will look very familiar to you as a JSON object, but there are no quotes around any of the keys (first_name, last_name, online, or full_name), and there is a function value in the last line.

If we want to access the data in the JavaScript object above, we could use dot notation to call user.first_name; and get a string, but if we want to access the full name, we would need to do so by calling user.full_name(); because it is a function.

JavaScript objects can only exist within the JavaScript language, so when you’re working with data that needs to be accessed by various languages, it is best to opt for JSON.

Accessing JSON Data JSON data is normally accessed in Javascript through dot notation. To understand how this works, let’s consider the JSON object sammy:

												
var sammy = {
		"first_name"  :  "Sammy",
		"last_name"   :  "Shark",
		"online"      :  true
}
														

In order to access any of the values, we’ll be using dot notation that looks like this:

												
sammy.first_name
sammy.last_name
sammy.online
														

The variable sammy is first, followed by a dot, followed by the key to be accessed.

To create a JavaScript alert that shows us the value associated with the key first_name in a pop-up, we can do so by calling the JavaScript alert() function:

												
alert(sammy.first_name);
Output: Sammy
														

Here, we’ve successfully called the value associated with the first_name key from the sammy JSON object.

We can also use square bracket syntax to access data from JSON. To do that, we would keep the key in double quotes within square brackets. For our sammy variable above, using square bracket syntax in an alert() function looks like this:

												
alert(sammy["online"]);
														
												
Output
true
														

When you’re working with nested array elements, you should call the number of the item in your array. Let’s consider the JSON below:

												
var user_profile = {
	"username": "SammyShark",
	"social_media": [
		{
			"description": "twitter",
			"link": "https://twitter.com"
		},
		{
			"description": "facebook",
			"link": "https://www.facebook.com"
		},
		{
			"description": "github",
			"link": "https://github.com"
		}
	]
}

														
												

To access the string facebook, we can call that item in the array within the context of dot notation:

												
alert(user_profile.social_media[1].description);
														
												
Output
facebook
														
												

Notice that for each nested element we’ll use an additional dot.

Using dot notation or square bracket syntax allows us to access the data contained in JSON format.

Conclusion JSON is a natural format to use in JavaScript and has many implementations available for use in many popular programming languages. If you want to use the format in another progamming language, you can see full language support on the “Introducing JSON” site.

Because it is lightweight and is readily transferred between programming languages and systems, JSON has been experiencing increased support in APIs, including the Twitter API.

You likely won’t be creating your own .json files but procuring them from other sources. You can check out these resources to learn about converting other data structures to JSON.