Multiple JSON calls in JQuery.

MrBaseball9
MrBaseball9 used Ask the Experts™
on
I have a program where I need to pull data from 3 different queries and then display the data on one page. I can get 1 query and display to work, but now I"m not sure how to handle getting the second and third queries of data.

Am I to put all data into 1 array or am I to use multiple getJSON calls within Jquery?  NOTE: my data will be automatically updating every X seconds.

My poorly written code is below.
<!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);                      
        });
 
	 $.getJSON("slaStats.txt",
		function(stats){
		$.each(stats, function (i, item) 
		{
                thestats = '<p>CSQName:' + item.CSQName + '</p>';                         
                $('#objectStats').html(thestats);
		}
                setTimeout('updateStatus()',1000);                      
        });
};
 
$(document).ready(updateStatus);
</script>
</head>
<body>
<div id="objectInfo"></div>
<div id="objectStats"></div>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
If you are simply displaying the results one after the other, you could either have multiple divs or use the .appendTo() function instead of the .html() function

Author

Commented:
I have to intertwine the data.  The data from the first query spits out basic data, the second query needs to loop through data, and the third just spits out data.
Your description of intertwine sounds like you want the result to be something like this (Q=query, L=line):

Q1,L1
Q1, L2,
...
Q1,LN
Q3,L1
Q3,L2
...
Q3,LN
Q2,L1
Q2,L2
...
Q2,LN

If that is correct, then just use another div or appendTo for query 2, appending the results to the results from query 1.  If a more complex intertwining is needed (such as sorting results of query 1 with query 3, then you will need to store the combined data in an array or something in order to manipulate it before printing.
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:
The program displays the number to calls and active calls coming into an office
So in 1 row, will be avg call time, longest wait time, longest call time
Row 2 Will have total calls, Number of Calls Waiting in Queue
Row 3 will be totalActive Agents, num of talking agents, num of idle agents, num of agents not ready
Row 4-??? will be a list of all data broken down by group. This will need to be displayed in a table

I am attaching my JSON data so that it might be able to help see what I mean.

/////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}]
 
 
///Data that is just pulled and displayed.
{"sla":{"metServiceLevel":"0","disposition":"0","loggedInAgents":"3","talkingAgents":"0","availableAgents":"0","unavailableAgents":"2","avgTalkDuration":"0","avgWaitDuration":"0","longestWaitDuration":"0","totalCalls":"0"}}
 
NOTE: All data will need to be refreshed every X seconds.

Open in new window

Author

Commented:
See Screenshot of what I'm trying to accomplish. I already have all of the queries completed. I just need direction as to how to display from multiple getJSONs or if I need to make one giant array.
test.jpg
It looks like you can build the table in the order you described.  If you want to refresh the page every time new data is obtained, just build the table from scratch each time.  It looks like it is broken down by query already.

If however, the goal is to have a dynamically updating page, then I would build the top of the table in the page itself, populating fields (table rows with the proper ID values) as new data is retrieved.  For the bottom rows, you could either set unique IDs up for each of the fields there and update as needed or simply remove all of those rows and re-populate each time you get new data.  If you just update fields rather than remove/add rows, you'll also need to have code to remove rows no longer needed and add new rows as needed (if that applies to your data set).

Author

Commented:
Do you have an example layout that I can use to create a table? and again, how do I get the data to the page, with 2 getJSON calls, or merge the data into 1 array?

I stink at jquery so I'm learning as I go. Any example code would be very helpful.
The table should be fairly straightforward, just remember to put IDs where they belong so that you can find them later.  Then, after you retrieve the data, instead of concatenating everything into one long string, set the values in the fields.
Table:
 
<table id="mytable">
<tr>
<td id="myfield1"></td><td id="myfield2"></td>...
</tr>
...
</table>
 
JQuery:
 
$("#mytable #loggedInAgents").html(data.sla.loggedInAgents)

Open in new window

Author

Commented:
I was able to call multiple document.ready's fulling from different PHP pages that created different JSON arrays.

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