<html>
<head>
<title>Read Simple Local Input JSON Data via Ajax - RJM Programming - June, 2014</title>
<script>
var infile='person.json';
function ajaxReq() { // Thanks to http://www.javascriptkit.com/dhtmltutors/ajaxgetpost4.shtml for ideas
var modeactivex = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE
if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<modeactivex.length; i++){
try {
return new ActiveXObject(modeactivex[i]);
} catch(e) {
//suppress error
}
}
} else if (window.XMLHttpRequest) { // if Mozilla, Safari etc
return new XMLHttpRequest();
} else {
return false;
}
}
var mygr=new ajaxReq();
mygr.onreadystatechange=function(){
if (mygr.readyState == 4){
if (mygr.status == 200 || window.location.href.indexOf("http") == -1) {
var pt = mygr.responseText;
var tbodyo = document.getElementById('mytbody');
document.getElementById('mytext').value = infile;
if (pt.indexOf('"name"') != -1 && pt.indexOf('"age"') != -1) { // Will assume this is original person.json scenario
var inj = "[" + mygr.responseText.replace("[","").replace("]","") + "]";
try {
var jsond = JSON.parse(inj); //retrieve result as an JavaScript object
} catch(ee) {
var jsond = eval(inj); //retrieve result as an JavaScript object
}
for (var j=0; j<jsond.length; j++) {
tbodyo.innerHTML = tbodyo.innerHTML + "<tr><td>" + jsond[j].name + "</td><td>" + jsond[j].age + "</td></tr>"; // Add to table row data
}
} else { // This JSON data needs to be analyzed before using JSON.parse Javascript method
var one = pt.split("}");
var mtone = one[0].split(",");
var colnames = [];
var trth = "<tr></tr>", two = ["",""];
for (var jj=0; jj<mtone.length; jj++) { // Determine JSON data column names
two = mtone[jj].split(":");
colnames[colnames.length] = two[0].replace('"','').replace('"','').replace('[','').replace('{','').replace('{','').replace('[','').replace(' ','').replace(' ','');
trth = trth.replace("</tr>", "<th>" + colnames[colnames.length - 1] + "</th></tr>");
}
tbodyo.innerHTML = trth; // Rewrite table header row
var injj = "[" + mygr.responseText.replace("[","").replace("]","") + "]";
try {
var jsondz = JSON.parse(injj); //retrieve result as an JavaScript object
} catch(eee) {
var jsondz = eval(injj); //retrieve result as an JavaScript object
}
for (var jz=0; jz<jsondz.length; jz++) { // For each row of JSON data
trth = "<tr></tr>";
for (var jjx=0; jjx<colnames.length; jjx++) {
trth = trth.replace("</tr>", "<td>" + eval("jsondz[" + jz + "]." + colnames[jjx]) + "</td></tr>");
}
tbodyo.innerHTML = tbodyo.innerHTML + trth; // Add to table row data
}
}
}
else{
alert("An error has occurred making the request");
}
}
}
if (window.location.search.substring(1) != "") { // Analyze get parameters in case a JSON input file/URL name is there
var huhf = window.location.search.substring(1).replace("&submit=Show","").split("=");
infile = huhf[huhf.length - 1];
mygr.open("GET", infile, true);
} else { // The https://au.answers.yahoo.com/question/index?qid=20140608002333AAU2Itp Yahoo Answers scenario
mygr.open("GET", "person.json", true);
}
mygr.send(null);
</script>
<body align="center" style="background-color:red;">
<table align="center"><tr><td><h1 align="center">My JSON Input Data </h1> </td><td><form style='margin-top: -20px;' action='./person.html' method='GET'><input id='mytext' name='mytext' value='person.json'></input> <input id='submit' name='submit' type='submit' value='Show'></input></form></td></tr></table>
<table align="center" cellpadding=5 cellspacing=5 style="background-color:yellow;margin-top: -20px;" border=7>
<tbody id='mytbody'>
<tr><th>Name</th><th>Age</th></tr>
</tbody>
</table>
</body>
</html>