JQuery, JSON, create Table with data

MrBaseball9
MrBaseball9 used Ask the Experts™
on
I have a JSON array of data.  I would like to be able to display this data in table format. To top it all off, I would like it so that the data auto refreshes every X seconds. I have looked all over the internet and have only seen 2 examples of this being done, but when I've tried it, I've had no luck at all duplicating it.

Can someone please create an example for me that I could then add on to?  I am attaching sample JSON data.

Thanks!
/////Array that will need to be put into a table
[{"CSQName":"General","loggedInAgents":2,"availableAgents":0,"unavailableAgents":2,"totalCalls":1,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group1","loggedInAgents":0,"availableAgents":0,"unavailableAgents":0,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":Group2","loggedInAgents":0,"availableAgents":0,"unavailableAgents":0,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group3","loggedInAgents":0,"availableAgents":0,"unavailableAgents":0,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group4","loggedInAgents":0,"availableAgents":0,"unavailableAgents":0,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group5","loggedInAgents":0,"availableAgents":0,"unavailableAgents":0,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group6","loggedInAgents":2,"availableAgents":0,"unavailableAgents":2,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group7","loggedInAgents":2,"availableAgents":0,"unavailableAgents":2,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group8","loggedInAgents":2,"availableAgents":0,"unavailableAgents":2,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group9","loggedInAgents":0,"availableAgents":0,"unavailableAgents":0,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group10","loggedInAgents":2,"availableAgents":0,"unavailableAgents":2,"totalCalls":0,"callsWaiting":0,"talkingAgents":0},{"CSQName":"Group11","loggedInAgents":2,"availableAgents":0,"unavailableAgents":2,"totalCalls":0,"callsWaiting":0,"talkingAgents":0}]

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2008
Top Expert 2008

Commented:
>>I ... have only seen 2 examples of this being done, but when I've tried it, I've had no luck at all duplicating it.
Perhaps it's due to the syntax error you have on you ajax.

..."CSQName":Group2",...

Should be:
..."CSQName":"Group2",...

You missed a quotation mark to the left of "Group 2". If your problem persists, post what you have.

Author

Commented:
The typo was my fault as I took out the actual names when I pasted it into the box.  I know that I need to do a .each, then I guess I would need a loop to display it. Any ideas?
Expert of the Year 2008
Top Expert 2008

Commented:
Post what you have so far
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
This might help a bit. Here's a link to one of the sites that I was trying to replicate to get my tables to display.
http://jhoyimperial.wordpress.com/2008/07/28/parsing-json-data-from-php-using-jquery/

The difference is that I don't want to click to display the data, and I want it to refresh every X seconds.

Whatever changes I made to it, I broke the program so I thought it would be best to give you a good starting point that's actually functional =)

Author

Commented:
Got a little farther:
<div id="loaduserdata">
	<table id="userdata" border="1">
		<thead>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email Address</th>
			<th>City</th>
		</thead>
		<tbody></tbody>
	</table>
    </div>
	<script>
	$(document).ready(function(){
	});
	$("#loaduserdata").ready(function(){
		$("#userdata tbody").html("");
		$.getJSON(
			"jsondata.php",
			function(data){
				$.each(data.userdata, function(i,user){
					var tblRow =
						"<tr>"
						+"<td>"+user.first+"</td>"
						+"<td>"+user.last+"</td>"
						+"<td>"+user.email+"</td>"
						+"<td>"+user.city+"</td>"
						+"</tr>"
					$(tblRow).appendTo("#userdata tbody");
				});
			}
		);
	});
	</script>

Open in new window

Expert of the Year 2008
Top Expert 2008

Commented:

<html>
<head>
	<title>Parsing JSON From PHP Using jQuery</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
	</script>
</head>
<body>
	<a href="#" id="loaduserdata">User Data</a>
	<table id="userdata" border="1">
		<thead>
			<th>CSQName</th>
			<th>Logged-In Agents</th>
			<th>Available Agents</th>
			<th>Unavailable Agents</th>
			<th>Total Calls</th>
			<th>Calls Waiting</th>
			<th>Talking Agents</th>
		</thead>
		<tbody></tbody>
	</table>
	<script>
	$(document).ready(function(){
		updatePage("jsondata.php","#userdata tbody");
	});
 
function updatePage(source,target){
		$("#userdata tbody").html("");
		$.getJSON(
			source,
			function(data){
				$.each(data.userdata, function(i,row){
					var tblRow =
						"<tr>"
						+"<td>"+row.CSQName+"</td>"
						+"<td>"+row.loggedInAgents+"</td>"
						+"<td>"+row.availableAgents+"</td>"
						+"<td>"+row.unavailableAgents+"</td>"
						+"<td>"+row.totalCalls+"</td>"
						+"<td>"+row.callsWaiting+"</td>"
						+"<td>"+row.talkingAgents+"</td>"
						+"</tr>"
					$(tblRow).appendTo(target);
				});
			}
		);
 
	setTimeout( function(){ updatePage("jsondata.php","#userdata tbody")},3000);//refresh every 3000 millisec=3 secs
}
 
	</script>
</body>
</html>

Open in new window

Author

Commented:
That is working much closer to what I need. Just 2 questions. Is there any way from making the table not flash every X seconds?  I guess it is doing it because the table is getting cleared and re-populated each time.

Also, I have another part of the program that just displays regular data (not in a loop). I have this working from another json array and call that is also refreshing X seconds. Is there I can integrate them the way this is set up, or will the entire page need to be altered to handle the refresh. See the code below for how the other data is being handled.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.json.js" type="text/javascript"></script>
<script language="Javascript"> 
var updateStatus = function() {
        $.getJSON("sladata.txt",
        function(data){
                content = '<p>Logged In:' + data.sla.loggedInAgents + '</p>';
                content += '<p>Idle:' + data.sla.availableAgents + '</p>';
                content += '<p>Not Ready:' + data.sla.unavailableAgents + '</p>';
                content += '<p>Active:' + data.sla.talkingAgents + '</p>';
                content += '<p>Total Calls:' + data.sla.totalCalls + '</p>';
                content += '<p>Avg Talk:' + data.sla.avgTalkDuration + '</p>';
                content += '<p>Avg Wait:' + data.sla.avgWaitDuration + '</p>';
                content += '<p>Longest Wait:' + data.sla.longestWaitDuration + '</p>';
                         
                $('#objectInfo').html(content);
                setTimeout('updateStatus()',1000);                      
        });
};
$(document).ready(updateStatus);
</script>
</head>
<body>
<div id="objectInfo"></div>
</body>
</html>

Open in new window

Expert of the Year 2008
Top Expert 2008
Commented:
try:
<html>
<head>
        <title>Parsing JSON From PHP Using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
        </script>
</head>
<body>
        <a href="#" id="loaduserdata">User Data</a>
        <table id="userdata" border="1">
                <thead>
                        <th>CSQName</th>
                        <th>Logged-In Agents</th>
                        <th>Available Agents</th>
                        <th>Unavailable Agents</th>
                        <th>Total Calls</th>
                        <th>Calls Waiting</th>
                        <th>Talking Agents</th>
                </thead>
                <tbody></tbody>
        </table>
        <script>
var updateStatus = function() {
        $.getJSON("sladata.txt",
        function(data){
                content = '<p>Logged In:' + data.sla.loggedInAgents + '</p>';
                content += '<p>Idle:' + data.sla.availableAgents + '</p>';
                content += '<p>Not Ready:' + data.sla.unavailableAgents + '</p>';
                content += '<p>Active:' + data.sla.talkingAgents + '</p>';
                content += '<p>Total Calls:' + data.sla.totalCalls + '</p>';
                content += '<p>Avg Talk:' + data.sla.avgTalkDuration + '</p>';
                content += '<p>Avg Wait:' + data.sla.avgWaitDuration + '</p>';
                content += '<p>Longest Wait:' + data.sla.longestWaitDuration + '</p>';
                         
                $('#objectInfo').html(content);
                setTimeout('updateStatus()',1000);                      
        });
};
 
 
function updatePage(source,target){
var tblRow="";
                $.getJSON(
                        source,
                        function(data){
                                $.each(data.userdata, function(i,row){
                                        tblRow +="<tr>"
                                                +"<td>"+row.CSQName+"</td>"
                                                +"<td>"+row.loggedInAgents+"</td>"
                                                +"<td>"+row.availableAgents+"</td>"
                                                +"<td>"+row.unavailableAgents+"</td>"
                                                +"<td>"+row.totalCalls+"</td>"
                                                +"<td>"+row.callsWaiting+"</td>"
                                                +"<td>"+row.talkingAgents+"</td>"
                                                +"</tr>";
                                });
                        $(target).html(tblRow);
                        }
                );
 
        setTimeout( function(){ updatePage("jsondata.php","#userdata tbody")},3000);//refresh every 3000 millisec=3 secs
}
 
        $(document).ready(function(){
                updatePage("jsondata.php","#userdata tbody");
		updateStatus();
        });
 
        </script>
 
<div id="objectInfo"></div>
 
</body>
</html>

Open in new window

Author

Commented:
That made them both display, but neither of them update every X seconds.
Expert of the Year 2008
Top Expert 2008

Commented:
if the data you are sending from sladata.txt and jsondata.php is always the same (static), then you will not notice the difference.

Author

Commented:
the data changes contstantly. It's displaying live call data off of a telephone system database.  the data itself will change, but the fields and location will not.  This is why I need the page refresh every X secs.

Author

Commented:
I got it to work by changing the second one to be written the same as the first, and then using 2 $(document).ready's.

Thanks again for all of the help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial