Introduction to JSON

From Knowledge Kitchen
Jump to navigation Jump to search


JavaScript Object Notation (JSON) is a shorthand syntax for representing objects in code.

What is an object?

If you are not familiar with object-oriented programming, you can think of an object as a custom data type. You design your own custom data type by creating custom objects.

Empty object

In JSON, all objects are represented between curly brackets. For example, you can indicate a blank object with the following code:

{

}

Objects with properties

If you want to have a property stored in your object, use the following syntax to indicate the name of the property (i.e. its "key") and its value:

{
	"first_name": "Foo"
}

Multiple properties are simply key/value pairs separated by commas:

{
	"first_name": "Foo",
	"last_name": "Barstein",
	"age": 40
}

Properties that are objects

The values of properties can themselves be objects:

{
	"first_name": "Foo",
	"last_name": "Barstein",
	"age": 40,
	"address": {
		"street": "1329 Progress Way",
		"city": "Cedar Rapids",
		"state": "Iowa",
		"zip": 52401
	}
}


Properties that are arrays

The value of any given property can be an array (a.k.a. list). Arrays are indicated by a comma-separated group of values surrounded by square brackets [ ... ]

{
	"first_name": "Foo",
	"last_name": "Barstein",
	"age": 40,
	"address": {
		"street": "1329 Progress Way",
		"city": "Cedar Rapids",
		"state": "Iowa",
		"zip": 52401
	},
	"lucky_numbers": [22, 109, 5, 13]
}

The values of a Javascript array can be of any type, including objects.

{
	"my_best_friends": [
		{
			"first_name": "Foo",
			"last_name": "Barstein",
			"age": 40
		},
		{
			"first_name": "Bar",
			"last_name": "Foostein",
			"age": 12
		}
	]
}

Objects with functions

It's possible in Javascript to have functions belong to objects.

 {
 	"first_name": "Foo",
 	"last_name": "Barstein",
 	"age": 40,
 	"address": {
 		"street": "1329 Progress Way",
 		"city": "Cedar Rapids",
 		"state": "Iowa",
 		"zip": 52401
 	},
 	"do_something": function() {
 		//some code within the function
		 var x = 10;
		 var y = "twenty";
		 var z = 20.1
		 var z = true;
 	}
 }

Storing objects in variables

The following examples show how to declare and define variables in JavaScript of various data types:

var x = 10;
var y = "twenty";
var z = 20.1
var z = true;

You can just as easily have a Javascript variable point to a JSON object:

 var my_object =  {
 	"first_name": "Foo",
 	"last_name": "Barstein",
 	"age": 40,
 	"address": {
 		"street": "1329 Progress Way",
 		"city": "Cedar Rapids",
 		"state": "Iowa",
 		"zip": 52401
 	},
 	"do_something": function() {
 		//some code within the function
		 var x = 10;
		 var y = "twenty";
		 var z = 20.1
		 var z = true;
 	}
 }

And you can now refer to the properties of the object through the variable, with dot notation, as in the following example:

var firstName = my_object.first_name;
var lastName = my_object.last_name;
//etc...

You can refer to child objects nested within the object:

var street_address = my_object.address.street;

You can even call the functions in the object:

my_object.do_something();


What links here