Using jQuery to pull text from a specific <td>

Question

I'm running an AJAX query on an external page, and am attempting to only return the data from the County . My current script is pulling the text from all of the table cells, but I cannot for the life of me get it to simply pull the county name.

The current script that is being run:

$( ".zipCode" ).each(function( intIndex ){
var zipCodeID = $(this).attr('id');
console.log('http://www.uscounties.org/cffiles_web/counties/zip_res.cfm?zip='+zipCodeID);
$.ajax({
    url: 'http://www.uscounties.org/cffiles_web/counties/zip_res.cfm?zip='+zipCodeID,
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find("p").text();
        console.log(headline);
        $('#'+zipCodeID).empty();
        $('#'+zipCodeID).append(headline);
    }
});
});

An example of the page that is being queried: http://www.uscounties.org/cffiles_web/counties/zip_res.cfm?zip=56159

This should work for all entered ZIPS. The page layout is the same, I just can't get the function to return only the county. Any help or advice would be awesome. Thanks!

Answer 1

With the complete lack of id s and class es on that page, you don't really have much to go on. If you have access to the source of that page, stick an id or class on the cell and make your life so much easier. If not, you'll have to use what you know about the structure of the pages to find the county. Something like this will work specifically on that one page you linked to. If other pages have slight variations this will fail:

var headline = $(res.responseText).find("table > tr:eq(2) > td:eq(3)").text();

This assumes that there is only ever one table on the page and that the county is always in the 3rd cell of the 2nd row.

Answer 2

You're basically screen scraping. I somehow think you'll have issues with this due to cross domain and other things, but that is ancillary to the question.

You need to walk through the resultant page. Assuming there is only ever one page on the screen, it'll look like something this:

var retVal = [];

// Basically, for each row in the table...
$('tr').each(function(){
    var pTR = $(this);

    // Skip the header row.
    if (pTR.find('th').length == 0)
    {
        // This is the array of TDs in the given row.
        var pCells = $('td', pTR);
        retVal.push({state:$(pCells[0]).text(), place:$(pCells[1]).text(), county:$(pCells[2]).text()});
    }
});
// retVal now contains an array of objects, including county.
if (retVal.length > 0) 
{
    alert(retVal[0].county);
}
else
{
    alert('Cannot parse output page');
}

The parsing code is written to be extensible, hence you get back all of the data. With postal codes, although you will likely only ever get back one county, you'll definitely get back more places. Also note... not every zip code has a county attached for a variety of reasons, but you should get back an empty string in that case.