SerenityNetworks Posted March 8, 2015 Share Posted March 8, 2015 I desperately need to get some simple data from a file into a table on a web page. I've been pointed to using JSON, but I'm not getting something(s) correct with implementation. I'm not sure what I'm doing wrong and I've spent hours on the task. I'm not a developer, but I can follow instructions. Any help will be greatly appreciated. Here is what I have set up: A simple web page. The code is pasted below. A simple JSON file (new.json). It is in the same path as the web page (C:xampphtdocsxamppaudit). The file's contents are pasted below. I'm running XAMPP as my server. Only Apache is turned on. I've placed a copy of jquery-1.11.2.min.js on my web server. I've tried placing the copy at both C:xampphtdocsxampp and C:xampphtdocsxamppaudit, but I have no idea if this is correct or not. I'll be very grateful for any assistance in getting the web page to return the contents of the new.json file into a table on the web page. Thanks in advance, Andrew PS. I do have a separate and related thread going here, but I started too advanced. Right now, I just need something simple. I'll work with the details in the other thread after I get a working import. web page code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>JSON 3</title><style>table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}</style></head><body>Example from: <a href="http://jsfiddle.net/sEwM6/258/">http://jsfiddle.net/sEwM6/258/</a><br/><br/><table id="personDataTable"> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> </tr></table><script>$.ajax({ url: 'new.json', //Change this path to your JSON file. type: "post", dataType: "json", success: function(data, textStatus, jqXHR) { drawTable(data); }});function drawTable(data) { var rows = []; for (var i = 0; i < data.length; i++) { rows.push(drawRow(data[i])); } $("#personDataTable").append(rows);}function drawRow(rowData) { var row = $("<tr />") row.append($("<td>" + rowData.id + "</td>")); row.append($("<td>" + rowData.firstName + "</td>")); row.append($("<td>" + rowData.lastName + "</td>")); return row;}</script></body></html> new.json data: {json: JSON.stringify([{id: 1,firstName: "Peter",lastName: "Jhons"},{id: 2,firstName: "David",lastName: "Bowie"}]} Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 9, 2015 Author Share Posted March 9, 2015 Never mind. I finally figured it out. I still need to clean up the page an implementation, but the following successfully will import a json (txt) file into a table on my web page. I'm posting it below for others that need a simple solution. Web Page Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>JSON 8</title><style>table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}</style></head><body><br/><br/>Example from: <a href="http://www.w3schools.com/json/json_http.asp">http://www.w3schools.com/json/json_http.asp</a><br/><br/><br/><strong>This one is working. Don't touch it!</strong><br/><br/><br/><div id="id01"></div><script>var xmlhttp = new XMLHttpRequest();var url = "tdata.txt";xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); }}xmlhttp.open("GET", url, true);xmlhttp.send();function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<tr><td>' + arr[i].id + '</td><td>' + arr[i].display + '</td><td>' + arr[i].url + '</td></tr>'; } document.getElementById("id01").innerHTML = '<table><tr><th>This</th><th>That</th><th>Another</th></tr>' + out + '</table>';}</script></body></html> JSON The table will import a json (txt) file that is in the same directory as the web page. The file is created as follows: Open Notepad Paste in the text that is in the code block below. Save the file as "tdata.txt" in the same directory as the web page. [{"id": "Whoohoo! Let us go team!","display": "Tutorial","url": "http://www.w3schools.com/json/default.asp"},{"id": "I'm still excited.","display": "JSON Tutorial","url": "http://www.w3schools.com/json/json_example.asp"},{"id": "This is great.","display": "SQL Tutorial","url": "http://www.w3schools.com/sql/default.asp"},{"id": "I finally got something working.","display": "PHP Tutorial","url": "http://www.w3schools.com/php/default.asp"},{"id": "Whew!","display": "XML Tutorial","url": "http://www.w3schools.com/xml/default.asp"}] Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now