current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

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>

EDIT: Found my solution with the following code:

<?php
$json = file_get_contents('collab.json.php');
$data = json_decode($json,true);

echo '<table>';
echo '<tr><th>Username</th><th>Period</th><th>Room</th><th>Next?</th></tr>';

$n = 0;

foreach ($data as $key => $jsons) {
    foreach ($jsons as $key => $value) {
        echo '<tr>';
    echo '<td>'.$data[$n]['username'].'</td>';
    echo '<td>'.$data[$n]['period'].'</td>';
    echo '<td>'.$data[$n]['Rm'].'</td>';
    echo '<td>'.$data[$n]['next'].'</td>';
    echo '</tr>';

    $n++;
} 
}
echo '</table>';
?>

</html>
share|improve this question
1  
Where does members in data.members comes from? I can't see it anywhere in your json. –  Tobias Kun Aug 13 '13 at 22:48
    
Are you using Firebug or some other tool to see if / where a javascript error is occurring? If not, I strongly recommend that - otherwise you're taking stabs in the dark. Additionally, it will let you watch the ajax call, including what is being returned, so you can see if there's any issues there as well. –  cale_b Aug 13 '13 at 22:51
    
cale_b, can you give me a quick rundown on using firebug for this purpose? –  Henry David Aug 14 '13 at 16:31

2 Answers 2

up vote 1 down vote

Assuming that the json you provided is the only output from your json.php you have to slightly change this line:

$.each(data.members, function(i,user){

To this:

$.each(data, function(i,user){
share|improve this answer
    
No dice with that one. The php file does indeed only echo the JSON object I've built –  Henry David Aug 13 '13 at 23:08
    
So well than tell me where the members property is coming from? –  Tobias Kun Aug 13 '13 at 23:09
    
Most likely from a tutorial I was following and I shouldn't have been using it! –  Henry David Aug 13 '13 at 23:11
up vote 0 down vote

usually in these situations, I add the items to an array and then join and append the array. so for example, in your each.

tblRow = [
  '<tr>',
    '<td>' + user.fName + '</td>',
    '<td>' + user.lName + '</td>',
    '<td>' + user.Ext + '</td>',
    '<td>' + user.Rm + '</td>',
  '</tr>',
].join('\n');

myArray.push(tblRow);

myArray being an empty array outside of your loop, and then after the loop append the array content to your table.

Hope this helps!

share|improve this answer
    
I've added: var myArray = newArray(); just above my $.each to no avail –  Henry David Aug 13 '13 at 23:07
    
newArray(); is referencing a function. You want var myArray = []; and that will create the empty array for you. –  Shan Robertson Aug 13 '13 at 23:14
    
No luck. I'm going to get firebug going tonight as I haven't used that in a while, as cale_b mentioned above. –  Henry David Aug 14 '13 at 1:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.