Assignment is AJAX/JSON Friends and Family. Create FriendAndFamily.json file and
ID: 3922221 • Letter: A
Question
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
Explanation / Answer
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>getJSONData</button>
<button>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
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.