Functions, variables and JSON.

Sorry this blog is so late!

Here is the plunk we should have gotten to by the end of the class.  We got most of the way there..
http://plnkr.co/edit/LbTLe8ya65xyjYOUPIsN?p=preview

So in the class, we got introduced to JSON, (Javascript object notation, which is the "new" XML, a way to pass data between OS platforms, programming languages, etc..).  We fiddled around a bit trying to capture JSON from Amazon.com and from assisted-living-communities.com using the Fiddler tool.
Fiddler acts as a proxy and captures all of the data that flows between your browser and websites.  The left pane in Fiddler shows all of this traffic and when you click on each line, and then click on the "inspectors" tab on the opposite pane, you can see the details of what was passed.  This ONLY can view HTTP traffic, not HTTPS.  If someone (a hacker) can place themselves between you and the webserver you are using, they can see all of your HTTP traffic with a tool like Fiddler.  This is a man-in-the-middle attack.  Scary!

Within the "inspectors" tab, certain requests have JSON (lower right pane).  If the request has JSON, go to the "raw" tab and copy the syntax that looks like stars off similar to :  [{"Images":[{"Id":"812","ThumbUrl":"http://www.choiceadvisory.com/images/listingimages/wa/812_images/thumb_812_0.jpg","Caption":"The Viewpointe on Queen .. etc..  Captured JSON data can be found in the data.js file in the plunk above.  After we capture this data, we can just assign it to a variable.

var data = Your_captured_JSON.

Who cares??

Well, this is how you might work with a "back end" developer.  She will tell you, "the JSON I will make available via my web service will look like this".  So, while she is still working, you can begin development on the front end.  When she is done, you get the JSON from her web service (programatically) instead of just putting it in a js (javascript) file.

There are comments throughout the plunk to get you more familiar with global variables, functions, page loads, etc..  Please post any questions.

For homework:
- The prev(ious) button doesn't work properly yet!  The page blows up when you are at the end of the properties and hit next.  Make the next button work.  There are hints in the scripts.js file on how to do this.
- Make some more attributes of properties appear on the page.  We at least need city, state and zip before we can launch this thing.
- Put latitude and longitude in the debug area for later use.  Maybe we could sell a map to the client of where these properties are.