Jump to content
SerenityNetworks

Simple JSON Setup

Recommended Posts

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"}]}

Share this post


Link to post
Share on other sites

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"}]

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...