How to parse and organize html ajax results with jQuery

I have an html page that uses jQuery to perform $.get calls to an page. The page looks up info from the database and returns a snippet of html code to the calling page, with no html tag, body tag....etc, just the specific snippet. I will use the html snippet that the page returns to parse info from it and plot points on a google map.

Here is what my page will currently return. Usually it will return this for more than one user. For every user the database finds, it will return the following html
<ul id="this is filled in with a different id value from database for each user it finds">

Open in new window

There are three other values of each record returned from the database query besides the user id. These are represented in the list items. All 4 values are from the same record, but the ID value is the wrapper or ul part because that is the unique value of the record returned.

The three other values for the list items are Name, Lat, Lng.

How do I access these values and get them into javascript variables for google maps marker plotting?

I don't need to know the plotting part, just the best way to get these values into usable variables by parsing the very simple html snippet that will be returned.

I CAN count on the order in which these li values appear, so things like first-child could work. Or, I could use an id system and add that to the ouput html snippet. I don't know which is best. Looking for a good idea
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
so one to n UL are returned?
Then you might use something like this:
1. You need a "hidden" wrapper element e.g. a div or span with a unique ID and the style set to display: none
<div id="tempresult" style="display:none;"></div>

Open in new window

2. From the $.get return result set it to the created div
$.get( "ajax/test.html", function( data ) {
  $( "#tempresult" ).html( data );

Open in new window

3. Now you can loop over the result

var entries = [];

$(document).ready(function () {
    $("#tempresult").find("ul").each(function(index, value){
        var liElems = $(this).find('li');
        var entry = [];
        entry["Name"] = $(liElems[0]).text();
        entry["Lat"] = $(liElems[1]).text();
        entry["Long"] = $(liElems[2]).text();
    $("#sampleOut").append("<p>Name: " + entries[0].Name + "</p>");
    $("#sampleOut").append("<p>Long: " + entries[1].Long + "</p>");

Open in new window

Live sample:


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
Hi Rainer. Is there any subject you don't know about? LOL.
Rainer JeschorCommented:
Yup, there are so many:
Linux / Unix, Java, SAP, Oracle, ...
Pretty all that is not directly created/used by any kind of Microsoft technology :-D

Thanks for the points.

BobHavertyComhAuthor Commented:
Well I wouldn't call a good understanding of jQuery to be Microsoft. Thanks again.
Rainer JeschorCommented:
Well, since SharePoint is using it out-of-the-box :-)

I really like the possibilities of client side scripting - e.g. dependant drop-downs in MOSS 2007 with the "simple" injection of jQuery and the SPServices JS library.

"Easy" to do, less deployment hazzles but the hell to debug ...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.