Building HTML table from JSON object via php URL
I'm having issues building an html table with a JSON object that I've
already got generated by a php page.
I'm building my JSON object from a spreadsheet where it includes: Fname,
Lname, Ext, Rm.
My json.php webpage gives me this result:
[{"fName":"John","lName":"Doe","Ext":"#666","Rm":"C3","id":0},{"fName":"Abraham","lName":"Lincoln","Ext":"#917","Rm":"C1","id":1}]
So now I'm trying to build an html page filling a table with this data
using jquery. Here's what I've got for my index.html:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript">
</script>
</head>
<body>
<div id="stuff"
<table id="userdata" border="1">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Ext</th>
<th>Room</th>
</thead>
<tbody></tbody>
</table>
</div>
<script>
$(document).ready(function(){
$("#userdata tbody").html("");
$.getJSON("json.php", function(data){
$.each(data.members, function(i,user){
var tblRow =
"<tr>"
+"<td>"+user.fName+"</td>"
+"<td>"+user.lName+"</td>"
+"<td>"+user.Ext+"</td>"
+"<td>"+user.Rm+"</td>"
+"</tr>"
$(tblRow).appendTo("#userdata tbody");
});
}
);
});
</script>
The only thing that this page will resolve to the browser are the table
headings of First Name, Last Name, Ext, Room.
I'm definitely new to web development including php, jquery, and js. Can
you spot any stupid obvious mistakes that could have been made?
No comments:
Post a Comment