JSON stands for JavaScript Object Notation. This text based object notation allows data to be stored and accessed through JavaScript. It serves as an alternative to XML and is easy to parse in JavaScript.
JSON data is written in name/value pairs. In each pair, the name and value are separated by a colon. Also, the name must be enclosed in double quotes. JSON data values can be numeric (int or float), string(enclosed in double quotes), Boolean (true or false), arrays (enclosed in [ ]), objects (enclosed in { }), or even null. For example:
“name” : ”Mickey”
“age” : 43
“isMale” : true
JSON Objects
Often, when storing data for use in a program, the data is organized into objects. An object is a representation of any real world thing. For example, civil engineers working on simulating traffic flow might need to represent cars and traffic lights. Game designers might need to represent missiles and enemies. Cell phone developers often need to reference dates, times and locations (GPS coordinates). Each of these items would be an object in JSON and we would need to determine the parts of each of them.
Properties are qualities that an object possesses. Programmers often need to determine what properties belong to an object. In the case of the car object that the civil engineers need, we might store properties of make, model, year, color, and number of passengers. In larger programs, data needs to be broken up into different objects. In these cases we use the ‘has-a’ test. For example, if we are building an online conferencing application, we will need to organize parents and teachers to meet at a given time to talk about a given student. When designing the Parent object, we would include the student name, because a parent ‘has-a’ student. However, we would not include the conference time, because it does not make sense to say a parent ‘has-a’ time.
To represent an object in JSON, we use curly braces and separate the properties (name/value pairs) by commas. So, to represent a user for a web application, we could do the following:
Notice how the data is readable to humans, as well as computers. This makes it easy for non-programmers to alter the data that is being used in a web application. If they understand the rules of JSON data formatting, they can go into the JSON file and add/delete/edit the available information.
Once created, object properties can be accessed using the standard object operator (.). To access a property, we type the objectName.propertyName. So, to access the username, we would type user.username. This code returns the value of “Alibaba”, which can be stored in a variable, output to the user, written in a condition, or used in an operation or function.
JSON Arrays
To store an array of information in JSON, the array must be given a name (in double quotes) and the values of the array must be enclosed in square brackets [ ]. Remember, the name of the array and the values must be separated by a colon, just like all other name/value pairs. Most often, the values inside JSON arrays are JSON objects.
To access items in a JSON array, we use standard JavaScript array notation ([ ]). This means, that to access user Alibaba, we would access users[0].
Data Design
When given a big project with a lot of data, one of the first steps is to determine all of the variables that are needed and break them up into objects. Again, the ‘has-a’ test is a key element in doing to. For example, if I am given the task of creating a program that will keep the signup information for students interested in enrolling in a preschool, I first need to understand the information that will be gathered.
So, we decide to gather the following information: names of the parent and student(s), address, phone, email, student bday, student age, application fee paid?, class assigned. In looking at the information, we see two main objects: Parent and Student. So, we design the following:
Parent: name, address, phone, email, student(s)
Student: name, bday, age, class assigned, application fee paid
We should also realize that there will be a list of parent desiring enrollment and that each parent may have a list of kids. So, the main array will be of type parent and then each parent will have a possible list of students. The resulting code example might look like this:
When a .json file is created and uses strictly JSON formatting, a web server and AJAX request are necessary to access the information. However, since JSON uses the same notation for arrays and objects as JavaScript, we can make a minor modification to our data and be able to process it. First, we should save the data file as .js instead of .json. Second, we need only create a JS variable and set it equal to the JSON data. For example:
var parents=[
{
"name":"Jane Smith",
"address" : "123 my Drive"
...
Then we simply need to use the appropriate javascript notation to dig down to the information we need. In the example above, there is an array called parents. That array only has one entry. To access it we would use
parents[0]
. Inside that array, is an object representing a parent. So, parents[0] is a parent object. To get the parents name, we would use
parents[0].name
. To get to Jimmy's birthday, we need to access the array and choose a parent (parents[0]), access the students array and choose a student(students[1]) and then access the bday property (.bday). When we put it all together, we get the following:
parents[0].students[1].bday
This information can be output, stored, compared or used in a variety of other ways.
An array of information can also be searched through. For example, I could run a loop that cycled through all of the parent objects in the parents array to do any one of the following tasks:
get a list of parent emails
get a complete list of students
find all of the phone numbers for parents in the PreK 2 class
make a list of all of the birthdays of students in the school
generate invoices for any students that have not paid their fee
... and more ...
//make a list of all students
var students=[];
for(var parent=0; parent < parents.length; parent++){
for(var student=0; student < parents[parent].students.length; student++){
students.push(parents[parent].students[student].name);
}
}
document.write(students);