Homework SourseAssignment is AJAXJSON Friends and Family Create FriendAndFa
Assignment is AJAX/JSON Friends and Family. Create FriendAndFamily.json file and populate it with your own friends and family(at least 6 of each) that will be called by FriendsAndFamilyList.html and displayed using JSON and AJAX with the click of an event button. The page will be able to sort the list displayed in the HTML file by either filling in the name, or selecting from a drop down. It will then print the people who fit the selection.
ie Last name:Hunter Relation:Brother
(would return)
Karl
Marc
Dani
Solution
Plase find the below answer:-
-----------------------------------------
Please let me know if you need more information.. if this implementation not as required please provide JSON sample.
======================================
FriendsAndFamilyList.html
<html>
<script>
var tempArray = [];
var dataArray = [];
function getFamilyData(){
var reqURL = \"FriendAndFamily.json\";
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
}
else
{
xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\"); //for IE6, IE5
}
xmlhttp.open(\"POST\", reqURL, false);
xmlhttp.send(null);
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200)
{
var respArray = xmlhttp.responseText;
var json = JSON.parse(respArray);
for(a in json){ tempArray.push([a,json[a]])}
for(a in json){ dataArray.push([a,json[a]])}
tempArray.sort(SortByName);//Sorting
tempArray.reverse();
document.getElementById(\"dataDisplay\").innerHTML=\"\";
for(var a=0,b,txt=\'\';b=tempArray[a];++a){
document.getElementById(\"dataDisplay\").innerHTML += \'<tr><td>\'+b[1].FirstName+\'</td><td>\'+b[1].LastName+\'</td></tr>\';
}
}
}
}
function SortByName(x,y) {
return ((x.FirstName == y.FirstName) ? 0 : ((x.FirstName > y.FirstName) ? 1 : -1 ));
}
function SortByLastName(x,y) {
return ((x.LastName == y.LastName) ? 0 : ((x.LastName > y.LastName) ? 1 : -1 ));
}
function sortlastName(){
dataArray.sort(SortByLastName);
dataArray.reverse();
document.getElementById(\"dataDisplay\").innerHTML=\"\";
for(var a=0,b,txt=\'\';b=dataArray[a];++a)
document.getElementById(\"dataDisplay\").innerHTML += \'<tr><td>\'+b[1].FirstName+\'</td><td>\'+b[1].LastName+\'</td></tr>\';
}
</script>
<body>
<center>
<button onclick=\"getFamilyData();\">getJSONData</button>
<button onclick=\"sortlastName();\">SortByLastName</button>
<table id=\"dataDisplay\" width=100%>
</table>
</center>
</body>
</html>
===================================
FriendAndFamily.json
=======================================
[
{
\"FirstName\" : \"XYZ\",
\"LastName\" : \"A\"
},
{
\"FirstName\" : \"ABCD\",
\"LastName\" : \"B\"
},
{
\"FirstName\" : \"ABCDE\",
\"LastName\" : \"C\"
},
{
\"FirstName\" : \"ABCDEF\",
\"LastName\" : \"D\"
},
{
\"FirstName\" : \"ABCDEFG\",
\"LastName\" : \"E\"
},
{
\"FirstName\" : \"ABCDEFGH\",
\"LastName\" : \"F\"
}
]
----------------------
Thanks
