asked on

Multiple JSON calls in JQuery.

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

Carl Bohman

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

MrBaseball9

ASKER

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.

Carl Bohman

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.

MrBaseball9

ASKER

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

MrBaseball9

ASKER

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

ASKER CERTIFIED SOLUTION

Carl Bohman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MrBaseball9

ASKER

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.

Carl Bohman

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

MrBaseball9

ASKER

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