In: Computer Science
Use a JSON data structure that contains student information (StudentId, FName, LName, Address, City, State, Zip, E-mail, Phone, Major, AdvisorName, AdvisorEmail).
Using the Foreach statement, display all the contents of the JSON data structure into a webpage.
What to turn in:
1. Screenshots: Code, JSON data, Web page showing JSON data in a table - pulled using the Foreach instruction.
1). ANSWER :
GIVENTHAT :
CODE :
datastructure.js
//JSON data structure is a collection of objects //It consists of name : value pairs //Names should be in double quotes //Values with string values should be in double quotes and numbers //can be specified without quotes //{ } braces contains collection of name : value pairs i.e., objects var datastructure = { "StudentId" : 1234, "FName" : "John", "LName" : "Doe", "Address" : "Street No.1 Lane 23 Fold", "City" : "Cumerics", "State" : "Washington", "Zip" : 12345, "Email" : "[email protected]", "phone" : 123456789, "Major" : "abcd", "AdvisorName" : "Holmes", "AdvisorEmail" : "[email protected]" } |
data.html
<!DOCTYPE html> <html> <head> <title>JSON Datastructure</title> <!--Linking datastructure.js file --> <script src="datastructure.js"></script> </head> <body> <h1>Data Taken from JSON Data Structure</h1> <h3 id="result"></h3> <script> //Displaying the data in html element //Getting a html element via its ID var result = document.getElementById("result"); //Displaying data //Looping through each object in the datastructure //Displaying name and values for( i in datastructure){ result.innerHTML += i + " : " + datastructure[i] + "<br/>"; } </script> </body> </html> |
SCREENSHOTS :
Please see the screenshots of the code for the indentations of the code.
(datastructure.js)
(data.html)
OUTPUT :