JSONintroF13.notebook October 25,...
Transcript of JSONintroF13.notebook October 25,...
JSONintroF13.notebook
1
October 25, 2013
You should continue at this page lookingat the rest of JSON syntax.
JSONintroF13.notebook
2
October 25, 2013
This JSON object is made up of two name/value pairs.I have set up a div with the id="main" and I am using the DOM getElementById("main").innerHTMLto replace what is in the division with the information I extract from the JSON objectinfo.major will get the value associated with the name major in the info object and info.deptwill get the value associated with dept in the info object.So I end up with idno.major get Web and info.dept getting CI. These are concatenatedtogether and they replace the innerHTML in the div with id="main".
JSONintroF13.notebook
3
October 25, 2013
JSON Objects
JSON objects are written inside curly brackets,
Objects can contain multiple name/values pairs:{ "firstName":"John" , "lastName":"Doe" }
This is also simple to understand, and equals to the JavaScript statements:firstName = "John"lastName = "Doe"
Continued definition from W3 schools.
JSONintroF13.notebook
4
October 25, 2013
Here I have set up an array called students and it contains objects for two students. It has been assigned to the variable info.When I refer to the data I have info.students[which student].which fieldsoinfo.students[1].major will get Programming see next slide
JSONintroF13.notebook
5
October 25, 2013
JSONintroF13.notebook
6
October 25, 2013
JSONintroF13.notebook
7
October 25, 2013
Alternate approach in this case the array does not have a name but it has been assigned to info.
JSONintroF13.notebook
8
October 25, 2013
JSONintroF13.notebook
9
October 25, 2013
Notice that I have now broken academic into two parts: numcr and gpaTo use them I use info.students[ ].academic.either numcr or gpa
JSONintroF13.notebook
10
October 25, 2013
I have a variable called to show and as I gather information I am adding it to what is already in to show use +=. I could write toshow = toshow +I decided to put the output in a table so the first thing I put in toshow is<ol>. Then I wanted to loop through info.students and I did that withfor (var i in info.students) so var i will change as it processes eachrecord in info.students. After the loop I add </ol> to toshow to complete the table and then I change the innerHTML in the div with id="tochange" to contain toshow.
JSONintroF13.notebook
11
October 25, 2013
JSONintroF13.notebook
12
October 25, 2013
Where lastslide leftoff.
Notice to get a phone number for the first studentinfo.students[0].phone[0].num to get the work numberinfo.students[0].phone[1].num to get the home numberinfo.students[0].phone[2].num to get the cell number
JSONintroF13.notebook
13
October 25, 2013
{"students":[ { "name": "Susan French", "major": "Webmaster", "yrenrolled": 2010, "academic": { "numcr": 54, "gpa": 3.7 } }, { "name": "Jay Costa", "major": "Programming", "yrenrolled": 2011, "academic": { "numcr": 49, "gpa": 3.6 } }, { "name": "Susan Ash", "major": "Programming", "yrenrolled": 2010, "academic": { "numcr": 36, "gpa": 3.8 } } ]}
This is a JSON file saved with a json extension.It is stufule.json
JSONintroF13.notebook
14
October 25, 2013
In this example I am using jQuery to get the JSON file stufile.json. Because I am using jQuery I need to set up the jQuery src.
Processing similiar to a previous example where I processedwith intenal JSON data.
JSONintroF13.notebook
15
October 25, 2013
JSONintroF13.notebook
16
October 25, 2013
This is simple an alternative to the previous slide instead of using += to accumulate, I put to show in a showArray each pass and then I wrote out the contents of the array. I was really just experimenting and playing...
JSONintroF13.notebook
17
October 25, 2013
Continuing the experiment, I used toshow = toshow + and I included the document write in the loop as I said, justexperimenting and playing...
JSONintroF13.notebook
18
October 25, 2013
Now I am including the traditional document.ready...