Loop Through an AJAX Called by Jquery that Pulled remote HTML, then Parsing the Data For Certain Criteria and pulling html tr

Question

Okay To start off this is my first post so I apologize initially for any "Newbie" mistakes I may Make. I will try to be Detailed as possible and lay it out as best I can.

What I Am doing:

Creating a Chrome App for Internal Company Use.

Issue:

Parsing Through an Ajax Call that contains full HTML Data from a loaded ajax call:

What I don't Have access to:

Server based PHP or MYSQL.

What I do have access to:

Full html data of all pages that contain the data that I need to loop through, as well as posting new data to server via put and get.

App Is already setup for permissions to access cross domain data so I will not run into issues with ajax and it cross domain policy. All data pulls successfully for pages I need to pull.

What I am Using: Jquery Javascript for things that may or not be supported or my lack of understanding of J Query as it is pretty robust and still trying to grasp the different api's available.

Problem:

I am able to load the ajax data with the html data I need. I have listed how the html looks after i have used Jquery "find" to locate the tbody within the html of the call I orginally made with ajax and what I filtered out so far. I also have it printing to consol.log(variablename) in the console of chrome. I have listed my goal for this data below the code. I am not worried about cross browser compatibility as this will be a chrome only app and other browsers will not be using the code.

<tbody>
<tr>
<td><strong>Header 1</strong></td>
<td><strong>Header 2</strong></td>
<td><strong>Header 3</strong></td>
<td><strong>Header 4</strong></td>
<td><strong>Header 5</strong></td>
<td><strong>Header 6</strong></td>
<td><strong>Header 7</strong></td>
</tr>
<tr >
<td>image location link</td>
<td>another link</td>
<td>Product</td>
<td>New</td>
<td></td>
<td>date</td>
<td></td>
<td>another link to an account</td>
</tr>
<tr>
<td>image location link</td>
<td>another link</td>
<td>Product2</td>
<td>New</td>
<td></td>
<td>date</td>
<td></td>
<td>another link to an account</td>
</tr>
<tr>
<td>image location link</td>
<td>another link</td>
<td>Product</td>
<td>old</td>
<td></td>
<td>date</td>
<td></td>
<td>another link to an account</td>
</tr>
</tbody>

Goal: The Tbody above will have more tr's then listed but is a sample of what is available. I would need to parse through the data each time and find each tr with td's that contain the Same product type and the td that has "New" Listed.

I really appreciate your guys help on this and look forward to hearing your responses.

What I have attempted using Jquery:

Trying to use contains and each loop to create a new data object. Instead of providing some horribly written code haha, I would like if someone can provide some great framework code that will help me get to the next level if possible.

Thanks In Advance!

Will the data format always be the same? Because you can always for a foreach on the tr elements and then easily search at the 4th TD to see if new exists. Will that always be case? — Matt, Jan 31 '13 at 00:36
Td's in each tr will always list in the same exact amount every time, it will not change no matter how much data is pulled, it will be listed the same. From my understanding jquery is depreciating the for each loop, that is why I did not use it, is this not the case? — DEVPROCB, Jan 31 '13 at 00:45
not that i know of. It's .each(), even if they deprecate it, they always replace it with something else. I've never seen them take something away. — Matt, Jan 31 '13 at 00:53
gotcha, the .each() is available in api, sorry misunderstood as older jquery had an actual call that was called for each, thanks for the clarification. I have used a .each() but I am not sure how to tell it to go through each of the tr's from the data. suplied by the ajax call. I had found another article on stackflow that appears similiar to what I want , but it does not appear to apply fully becaue I need to create a seperate object for the data for use later: http://stackoverflow.com/questions/10589703/jquery-ajax-cant-loop-thru-the-found-data — DEVPROCB, Jan 31 '13 at 01:00
Not sure how you have your code setup, but in any case you could do something like `http://jsfiddle.net/JzUrq/` and you can check if that equals New. — Matt, Jan 31 '13 at 01:01
That is AWESEOME Matt Thanks! How do I credit you for the answer, as I stated still new stackflow and I know you guys get ranked for answers so would love to do that for you — DEVPROCB, Jan 31 '13 at 01:23

Matt · Accepted Answer · 2013-01-31T01:30:51.193

1

So you can find for New or find or old and get rid of the old. It's up to you.

Here is another update that provides a second table. This should get you started. Basically it skips the first "tr" since that is the header and finds the rest that have New at the 4 position. Closest traverses up the dom to the first parent.

http://jsfiddle.net/JzUrq/2/

var data = $("#holder").html();

$("#newTable").append($(data).find("tr:eq(0)"));

$(data).find("tr:gt(0) :nth-child(4):contains('New')").closest('tr').each(function(index){
    var row = "<tr>"+$(this).html()+"</tr>";
    $("#newTable").append(row);
});

Something else you can do is set the html to that entire table and simple hide anything with old.

edited Jan 31 '13 at 01:30

answered Jan 31 '13 at 01:25

Matt

7,049
7
50
77

You are the man thank you soooo much Matt, I try to figure out alot of this stuff on my own but jquery has really thrown be for a loop, I really appreciate it! – DEVPROCB Jan 31 '13 at 01:33
Put as answer, I was not able to up vote, cause it says I don't have enough reputation points, But I was able to put check the check mark for the answer. I really appreciate your help, this was extremely helpful. Thanks – DEVPROCB Jan 31 '13 at 01:35

Loop Through an AJAX Called by Jquery that Pulled remote HTML, then Parsing the Data For Certain Criteria and pulling html tr

1 Answers1