Parse JSON data feed and auto-populate table cell with JQuery

[Rob Scott]

Allright Refreshers,

I have been tasked with a project to evaluate a JSON data feed (that
updates every 10 seconds or so) and auto populate table cells with
specific values from the feed. The JSON data consists of an array of
objects that all contain the exact same strings with different values
that update frequently. I am using JQuery to load the JSON feed using
the "getJSON" Ajax request:

http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

My problem is that I need to find specific objects in the JSON array
and I want and populate table cells with values from those objects. I
don't know , but I do know how to identify the desired objects in the
array by specifying the values of strings that will remain constant.
Here is an example JSON feed that we can use for reference:

http://www.pavels.net/feed

Taking the JSON data in that feed, I want to populate cells in a table
with certain values. The only way that I know how to identify the
objects in the array that I want is by the string called "skill" that
shows up in each object. Lets say that I want to populate the cells in
the table below with data from the objects that contain 'skill': 3,
'skill': 5 and 'skill': 8. Here is the table:

<table>
<tr>
<th scope="col">Three</th>
<td id="3_waiting"></td>
<td id="3_oldest"></td>
<td id="3_available"></td>
<td id="3_work"></td>
</tr>
<tr>
<th scope="col">Five</th>
<td id="5_waiting"></td>
<td id="5_oldest"></td>
<td id="5_available"></td>
<td id="5_work"></td>
</tr>
<tr>
<th scope="col">Eight</th>
<td id="8_waiting"></td>
<td id="8_oldest"></td>
<td id="8_available"></td>
<td id="8_work"></td>
</tr>
</table>

So, I want to pupulate the table cell with the id "3_waiting" with the
value from the JSON feed object that contains 'skill': 3 - the value I
want to use is the one for 'waiting' (which is 0). Next, I want to
populate the cell with the id "3_oldest" with the value from the JSON
feed object that contains 'skill': 3 - the value I want to use is the
one for 'oldest' (which is 0).

For the next row, I want to populate the table cells with the same
values, except from the object that conatains 'skill': 5. Same for the
next row, except using the values in the object that contains 'skill':
8.

What is the JavaScript (or JQuery) that I can use to do this? I also
want to "refresh" the table cells every 20 seconds by loading the feed
again and populating the cells with the new values (as the feed is
updated every 10 seconds.)

BONUS POINTS:

How can I convert the 'tstamp' and 'oldest' values from seconds, to
minutes/seconds (ex: 143 seconds would display as 2:23).

If you can help with with this, I will be forever grateful.

-- Rob

[David Hayes]

Hey,

My caveat: It's very Monday today, and I'm not quite awake yet.
Both my JavaScript and my explanation could be wrong and make no
sense... ( =

I think it would be a tad easier if you put an "id" on the <tr>
elements instead, and changed the "id" property on each <td> to a
class after removing the numeric prefix. So, basically, you'd change
the <td id="3_waiting"></td> to <td class="waiting"></td>. Doing that
makes it easier for you to use JQuery CSS selectors to find each
individual element to populate with your data like so:

function populate(data, trId) {
// data is one of the objects from the JSON feed that starts with
{'skill':...
// trId is the "id" of the <tr> element whose <td> children you
want to change

// look for children of id trId with class 'waiting'
$('#' + trId + ' waiting').innerHTML = data.waiting;
$('#' + trId + ' oldest').innerHTML = data.oldest;
// etc...
}

Once you have that function, you could set up a loop that iterates
through the array of objects you get back from the feed and call your
populate function with the right info:

// say that jsonData is the full blown object you get back from the
JQuery getJSON call
for (var i = 0; i < jsonData.data.length; i++) {
var currentData = jsonData.data[i];
if (currentData.speed === 3 || currentData.speed === 5 ||
currentData.speed === 8) {
populate(currentData, 'myId' + currentData.speed);
}
}

To make it so you can refresh the data every 20 seconds, use the JS
function 'setTimeout' like this:

var refreshData = function() {
// this is what we want to happen every 20 seconds
// ... code goes here ...

// this call ensures that refreshData will be called again in 20 seconds
setTImeout(refreshData, 20);
}

refreshData();

That *should* get you what you want.

BONUS:

Basically, you set up a function that takes a number of seconds and
returns a string representation like so...

function secondsAsTimeString(totalSeconds) {
// we want the number of whole minutes, so Math.floor zaps the
decimal part for us
var numMinutes = Math.floor(totalSeconds / 60);
// the % operator will give us the modulo, the remainder of seconds
after we account for minutes
var numSeconds = totalSeconds % 60;

return '' + numMinutes + ':' + numSeconds;
}

Assuming that all works for you and I succeeded in making sense...
what's my prize? ( ; If any of that seems wrong or doesn't make sense,
please let me know.

- David

[Chris Hunter]

Another quick caveat. I believe that the id attribute must start with a
letter, not a number.

http://htmlhelp.com/reference/html40/attrs.html

Chris Hunter
chu...@wondertwinpowers.net

[Rob Scott]

Thanks for your advice and direction. I will see if I can get this
working with your suggestions. I'll let you know how it works out -
and what the prize is :).

-- Rob