This is a simple intro to getting started with JSON.
JSON stands for Java Script Object Notation; it is a native format to the JavaScript engine that makes it possible to create simple (or complex) data structures. Lets take a look at a very simple JSON object.
var MyObject = { "name" : "Bob" };
As you can see, this is a very simple example, but let's take a look at how we can make use of this simple JSON structure.
document.write(MyObject.name);
That will return the value "Bob". Lets try adding a few more details to our JSON object and see how we can access these values.
var MyObject = { "name" : "Bob", "title" : "Manager", "phone" : "415-555-1212" };
Now lets try to access these values.
document.write(MyObject.name);
document.write(MyObject.title);
document.write(MyObject.phone);
The values returned are:
"Bob"
"Manager"
"415-555-1212"
Pretty straight forward right? Lets now use these values by concatenating them into a string.
var StringExample = "Hi, my name is " + MyObject.name + ". My job title is " + MyObject.title + ", and my phone number is " + MyObject.phone;
Now call that variable to print out the string.
document.write(StringExample);
You should now see:
Hi, my name is Bob. My job title is Manager, and my phone number is 415-555-1212
You're probably now asking "What if I need to make a structure that contains more than one record?". We have a simple solution for doing just that utilizing arrays. Lets take a look.
var MyObject = {"people" : [ {"name" : "Bob"},{"name" : "Steve"}, {"name" : "Joe" }]};
Lets print out the first name value in our "people" array.
document.write(MyObject.people[0].name);
The value that we should get is:
"Bob"
Let's look at the next value:
document.write(MyObject.people[1].name);
The value that we should get is:
"Steve"
Lets now loop through our array and get all of the values.
for (var i=0; i < MyObject.people.length; i++) {
document.write(MyObject.people[i].name);
}
You should see all of the name values in your array printed out.
Let's add a few more values to our array just to be clear that we have a good understanding of how to utilize this structure.
var MyObject = {
"people" : [
{"name" : "Bob", "title" : "Manager", "phone" : "415-555-1212" },
{"name" : "Steve", "title" : "Programmer", "phone" : "415-555-4545" },
{"name" : "Joe", "title" : "Secretary", "phone" : "415-555-9999" }
]};
Now lets print the "title" of the first element in our "people" array.
document.write(MyObject.people[0].title);
You should get the value:
"Manager"
Now lets print the "phone" of the third element in our "people" array.
document.write(MyObject.people[2].phone);
You should see the value:
"415-555-9999"
So that's JSON in a nutshell. There are obviously more complex ways to utilize JSON, but hopefully this gets you started on the right path and you find JSON to be a useful structure for simplifying your code.
