Your instructions are to first craft your own data set using JSON format. You sh
ID: 3589514 • Letter: Y
Question
Your instructions are to first craft your own data set using JSON format. You should do it by hand in notepad so that you get good practice writing JSON from scratch. Make your data set represent the structure of some content you want to display on your page. The data does not have to be extremely complex, but it should be significant enough to demonstrate mastery of JSON, for example, use some arrays and sizeable objects. Do not just copy and paste JSON and change the names and values; if you do this, you will have a very hard time actually learning it, and future assignments will be difficult. When you have your JSON object(s) ready, proceed to use JQuery to select elements in your HTML/DOM to display your data to verify the integrity of the object structure. The CSS layer is not necessary, but you may use CSS to make your page look nicer.
Explanation / Answer
Step 1: Write JSON Dataset/ Create JSON file using text file and save it as myjson.json
Step 2: Open your html file and parse the json format written in the file/ access the json file in script tag.
Step 3: Create the html table using JQUERY and json and parse the data fields given in json format.
myjson.json
{
"employee": [
{
"EmployeeID": "E65086",
"Employee Name": "Alfred James",
"Department": "IT"
},
{
"EmployeeID": "E65077",
"Employee Name": "William Black",
"Department": "HR"
},
{
"EmployeeID": "E6787",
"Employee Name": "William Black",
"Department": "Marketing"
}
]
}
This JSON file contains 3 records and 3 columns/fields of employee data,which are employeeid, employeename,department.
Your Script in HTML will be:
<script type="text/javascript" >
function load() {
var obj=[
{
"EmployeeID": "E65086",
"EmployeeName": "Alfred James",
"Department": "IT"
},
{
"EmployeeID": "E65077",
"EmployeeName": "William Black",
"Department": "HR"
},
{
"EmployeeID": "E6787",
"EmployeeName": "William Black",
"Department": "Marketing"
}
]
var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
var tr="<tr>";
var td1="<td>"+obj[i]["EmployeeID"]+"</td>";
var td2="<td>"+obj[i]["EmployeeName"]+"</td>";
var td3="<td>"+obj[i]["Department"]+"</td></tr>";
$("#mytable").append(tr+td1+td2+td3);
}
}
</script>
Call this script in your onload.
<body>
<div id= "div1">
</div>
</body>
Note:- You can also call a JSON file in your scipt, instead of parsing the given data.
Eg:- <script type="text/javascript" src="myjson.json"></script>
<script type="text/javascript" >
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.