Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I GET a HTML response from AJAX over cors and the response is a table. Each category has its title and sub elements. The title names vary quite a bit and are likely to change in the future. The sub elements in each title change almost on a daily basis, but the DOM structure doesn't.

Is there a way I could get rid of this if statement and replace it with code that isn't element specific? Some way of selecting DOM elements I'm not aware of?

Relevat JS

classifiedFilter: function (response) {
  var Classified = {
    ClaAdministrative: [],
    Paraeducator: [],
    Clerical: [],
    Custodial: [],
    NonRep: [],
    Maintenance: [],
    ClaSubstitute: [],
    Coaching: []
  },
  response = $(response).find("table tbody tr td").html();
  $(response).find("#isHeadType").remove();
  $(response).find("font:contains(Open to all)").parent().parent().remove();
  //Filter each span title and classify sub items
  $(response).find("span").parents("tr").each(function () {
    //Find categories and separate by class
    var rowtext = $(this).find("span").text(),
      position = "";
    position = rowtext.replace(/-/gi, "").replace(/\s/g, "");
    $(this).nextAll("tr").addClass(position);
    //Push content into Classified
    ((position === "Administrative") ? $(this).nextUntil(".Paraeducator").each(function () {
      Classified.ClaAdministrative.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "Paraeducator") ? $(this).nextUntil(".Clerical").each(function () {
      Classified.Paraeducator.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "Clerical") ? $(this).nextUntil(".Custodial").each(function () {
      Classified.Clerical.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "Custodial") ? $(this).nextUntil(".NonRep").each(function () {
      Classified.Custodial.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "NonRep") ? $(this).nextUntil(".Maintenance").each(function () {
      Classified.NonRep.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "Maintenance") ? $(this).nextUntil(".Substitute").each(function () {
      Classified.Maintenance.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "Substitute") ? $(this).nextUntil(".Coaching").each(function () {
      Classified.ClaSubstitute.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : ((position === "Coaching") ? $(this).nextAll().each(function () {
      Classified.Coaching.push($.trim("<tr>" + $(this).html() + "</tr>"));
    }) : []))))))));
  });
}

Summarized HTML GET response (added spaces for visual aid)

<table border="0" cellspacing="0" cellpadding="0" style="MARGIN-TOP: 10px;">
  <tr>
    <td> <font class="HeadTitle">External Positions: Open to all applicants.</font>
      <br>
    </td>
  </tr>
  <tr>
    <td height="20" nowrap="nowrap">    <i><span id="ExternalJobs__ctl1_BargainGroup" class="BodyText">Administrative</span></i>

      <br/>
      <br/>
    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=3660&type=2&int=External'>Administrative Assistant I, Health Tech-Leave Replacement-2 hours   -   ME1214</a></b>

    </td>
  </tr>
  <tr>
    <td height="20" nowrap="nowrap">    <i><span id="ExternalJobs__ctl2_BargainGroup" class="BodyText">Paraeducator</span></i>

      <br/>
      <br/>
    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=3544&type=2&int=External'>Paraeducator, SpEd IP/ELL-6.5hours  -   MC1223</a></b>

    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=3603&type=2&int=External'>Special Ed Paraeducator, School Adjustment Program (SA-)-6.5 hours  -   MK1215</a></b>

    </td>
  </tr>
  <tr>
    <td height="20" nowrap="nowrap">    <i><span id="ExternalJobs__ctl3_BargainGroup" class="BodyText">Clerical</span></i>

      <br/>
      <br/>
    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=3481&type=2&int=External'>Admin Assistant IV-8 hours  -   IT1209</a></b>

    </td>
  </tr>
  <tr>
    <td height="20" nowrap="nowrap">    <i><span id="ExternalJobs__ctl5_BargainGroup" class="BodyText">Non-Rep</span></i>

      <br/>
      <br/>
    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=2732&type=2&int=External'>Licensed Practical Nurse (Pool position)    -   2012LPNPool</a></b>

    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=3472&type=2&int=External'>Certified Occupational/Physical Therapist Assistant- POOL   -   COTA2012Pool</a></b>

    </td>
  </tr>
  <tr>
    <td height="20" nowrap="nowrap">    <i><span id="ExternalJobs__ctl7_BargainGroup" class="BodyText">Substitute</span></i>

      <br/>
      <br/>
    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=26&type=2&int=External'>Substitute Food Service Helpers   -   FSSub</a></b>

    </td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> <b><a href='jobs.aspx?id=28&type=2&int=External'>Substitute Custodians -   MTSub</a></b>

    </td>
  </tr>
</table>
share|improve this question

2 Answers 2

I have a hard time believing this code is working the way you want it to.

But to answer your question, here is how I would get rid of that if statement. Use a two dimensional array as a lookup table and push items into the arrays there.

var classifiedFilter =  function (response) {

        var jobTable = [
            ["Administrative", []],
            ["Paraeducator", []],
            ["Clerical", []],
            ["Custodial", []],
            ["NonRep", []],
            ["Maintenance", []],
            ["Substitute", []],
            ["Coaching", []]
        ],response = $(response).find("table tbody tr td").html();

        $(response).find("#isHeadType").remove();
        $(response).find("font:contains(Open to all)").parent().parent().remove();
        //Filter each span title and classify sub items
        $(response).find("span").parents("tr").each(function () {
            //Find categories and separate by class
            var rowtext = $(this).find("span").text(),
              position = "";

            position = rowtext.replace(/-/gi, "").replace(/\s/g, "");
            $(this).nextAll("tr").addClass(position);

            //Push content into Classified
            for (i = 0; i < jobTable.length; i++) {
                if (position === jobTable[i][0]) { // section/button is enabled
                    if (i === (jobTable.length - 1)) {
                        $(this).nextAll().each(function () {
                            jobTable[i][1].push($.trim("<tr>" + $(this).html() + "</tr>"))
                        });
                    } else {
                        $(this).nextUntil("." + jobTable[i + 1][0]).each(function () {
                            jobTable[i][1].push($.trim("<tr>" + $(this).html() + "</tr>"))
                        });
                    }
                }
            }
        });

    }
share|improve this answer
    
I like your code and it works! The only thing is that you're assuming that the titles in the table don't change. If they do, the items won't be classified properly. –  Jonny Sooter Feb 13 '13 at 16:48
1  
This site is for working code. Therefore I did not change any functionality. This code does exactly what yours did while removing the hardcoded if statement. –  nickles80 Feb 13 '13 at 17:26
    
+1 for awesomeness though! –  Jonny Sooter Feb 14 '13 at 15:22
up vote 1 down vote accepted
            var Classified = {},
                response = $(response).find("table tbody tr td").html();
            $(response).find("span:contains(Classified Positions)").remove();
            $(response).find("font:contains(Open to all)").parent().parent().remove();

            var position = "";
            Classified[position]=[];
            $(response).find("tr").each( function() {
                var currentTR = $(this);
                // catch span if any
                var rowtext = currentTR.find("span").text().replace(/-/gi, "").replace(/\s/g, "").replace(/Classified/gi, "");
                if (rowtext) {
                    position = rowtext;
                    Classified[position]=[];
                } else {
                    // Collect rows
                    Classified[position].push( "<tr>" + $.trim(currentTR.html()) + "</tr>" );
                };
            });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.