parse json, then do something with it: how to get the order right?

Question

I'm grabbing some JSON from YQL, parsing it into a list. Then I want to highlight rows on the list according to their contents.

I can do these two things separately by highlighting on .click but I really don't want to do that step--I want the highlights to happen right away. Here's the two bits:

var yqlURL="http://query.yahooapis.com/v1/public/yql?q=select%20name%2Cstatus%2Ccurrentposition%2Ccashonhand%20from%20atom%20where%20url%3D'https%3A%2F%2Fspreadsheets.google.com%2Ffeeds%2Flist%2F0AiMSzYWiIFeldHdzUXBnWkJxaWZ1eEdvRm5LMUppYXc%2Fod6%2Fpublic%2Fvalues'&format=json&diagnostics=true&callback=?";

$.getJSON(yqlURL, function(data) {

$.each(data.query.results.entry,function(){
$('#result').append('<li><b>'+this.name+'</b>  &nbsp current job: '+this.currentposition+' | cash on hand: '+this.cashonhand+' | race status: <span class="status">'+this.status+'</span></li>');
});
});

OK, so that's bit one

And here's bit two:

$('#clickall').click(function(){
$("#result li:contains('In')").toggleClass("in");
$("#result li:contains('Mulling')").toggleClass("mulling");
$("#result li:contains('Rumored')").toggleClass("rumored");
$("#result li:contains('Out')").toggleClass("out");
});

So yeah, I know there must be a way of doing the highlights (which are what's being toggled there) once the JSON's in. But, well, I'm dumb.

Answer 1

You need to put the toggleClass calls after the $.each call in the getJSON callback.

Answer 2

do it this way,

var yqlURL = "http://query.yahooapis.com/v1/public/yql?q=select%20name%2Cstatus%2Ccurrentposition%2Ccashonhand%20from%20atom%20where%20url%3D'https%3A%2F%2Fspreadsheets.google.com%2Ffeeds%2Flist%2F0AiMSzYWiIFeldHdzUXBnWkJxaWZ1eEdvRm5LMUppYXc%2Fod6%2Fpublic%2Fvalues'&format=json&diagnostics=true&callback=?";

$.getJSON(yqlURL, function(data) {

    $.each(data.query.results.entry, function() {
        var li = $('<li>').html('<b>' + this.name + '</b>  &nbsp; current job: ' + this.currentposition + ' | cash on hand: ' + this.cashonhand + ' | race status: <span class="status">' + this.status + '</span>');

        $('#result').append(li);

        if (this.status == 'In') {
            li.addClass('in');
        } else if (this.status == 'Mulling') {
            li.addClass('mulling');
        } /* else if (blah == blah) {bla blah}*/
    });

});​

quick demo