Assignment #6 JSON Data

Objectives

Learn how to use JSON data format for creating Javascript objects

Supports Learning Outcomes 3,4
3 – Use XML, XSL, CSS, and correct techniques to create properly structured and well designed web sites.
4 – Ability to use client side scripting languages (DHTML, Javascript) to add interactivity to web sites.

Assignment

You should already have some experience with jQuery and some simple experience with JSON (from charting). In this assignment we will be creating some JSON data, parsing it, and displaying it.

Step 1 – If you are not familiar with JSON you should complete the JSON tutorial at https://www.w3schools.com/js/js_json_intro.asp

Step 2- You will now create a JSON file to represent some data of your own making some examples of data that you could create such as A sports score database ex. players, playerName,  season, and scoring. Feel free to create data on something that is of interest to you (and share on the discussion board).

Step 3 – Validate your JSON (you can use JSON Lint) http://jsonlint.com/ and save it to your server as a text file.

Step 4 – In a web page, read the JSON data and display the data in a nice human readable format (table or list). This is demonstrated in the W3Schools tutorial (and many other posts)

You must have JSON in an external file
Read this file (myjson.json or other name) into your html file and display it formatted nicely

You are learning to display external data. This is a valuable ability when displaying the results of database queries which can be exported easily as json files (by most databases). You never have to change the html, you simply update the json file and everything is the current data. Also you can easily make the code have the ability to read and display different json files. This is very useful if you have something like annual or daily data that you want the user to be able to select and display.

Information

You should be able to easily complete this assignment if you complete the JSON tutorial you should have no issues here. JSON was invented to make dealing with data in web pages and in Javascript EASY.

Estimated Completion Time

You should be able to complete this in about 2-3 hours

Questions and Answers

External Resources

There are tons of resources on JSON including JSON editors. http://www.jsoneditoronline.org/ 

This little guide and tutorial will take you through everything you need to be able to complete this assignment – https://digitalfox-tutorials.com/tutorial.php?title=Display-JSON-data-in-HTML-table-using-JavaScript

Grading Criteria

This is all or nothing, you should be able to create the JSON and display it with very little problems.