JSONintroF13.notebook October 25,...

18
JSONintroF13.notebook 1 October 25, 2013 You should continue at this page looking at the rest of JSON syntax.

Transcript of JSONintroF13.notebook October 25,...

Page 1: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

1

October 25, 2013

You should continue at this page lookingat the rest of JSON syntax.

Page 2: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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".

Page 3: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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.

Page 4: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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

Page 5: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

5

October 25, 2013

Page 6: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

6

October 25, 2013

Page 7: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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.

Page 8: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

8

October 25, 2013

Page 9: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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

Page 10: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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.

Page 11: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

11

October 25, 2013

Page 12: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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

Page 13: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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

Page 14: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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.

Page 15: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

15

October 25, 2013

Page 16: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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...

Page 17: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

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...

Page 18: JSONintroF13.notebook October 25, 2013cisweb.bristolcc.edu/~pgrocer/JSON/test2013/JSONintroF13.pdf · This is a JSON file saved with a json extension. It is stufule.json. JSONintroF13.notebook

JSONintroF13.notebook

18

October 25, 2013

Now I am including the traditional document.ready...