JavaScript - Just learning FOR

Question

I'm just learning JavaScript and I found myself writing the code below and thinking that there ought to be a way to use a FOR or a WHILE statement to cycle through these to get the desired output but it's a bit more complicated than a basic FOR loop (at least for me). Could you help me get started?

Questions: If using a FOR how would I get the count of the XML nodes so I know when it needs to stop?

Is there a means in AJAX to go through this w/o needing to use a FOR or a WHILE?

Additional Info: The actual source is MUCH larger through OA40+ and VS50+ and may change so getting it from the XML will save a LOT of code work as the XML file changes.

Edit -Update by request - XML was too large to post here so I've provided it online: http://mdihosting.com/5/Projects/VRACC/xml/categories.xml

function onchange1(catname) {
   //alert(catname);
   $("#oatable tbody tr").empty();
   $("#epcftable tbody tr").empty();
   $.ajax({
      type: "GET",
      url: "xml/categories.xml",
      dataType: "xml",
      success: function (xml) {
         var div = $('#epcf-wrap');
         div.empty();
         var findval = "Cat"
         $(xml).find('Cat').each(function () {
            var cval = $(this).attr('name');
            if (catname === cval) {
               // I bet there is an easier way to do this
               var xmlArr = [];
               var xml_EPCF_1_1 = $(this).find('EPCF_1_1').text();
               var xml_EPCF_1_2 = $(this).find('EPCF_1_2').text();
               var xml_EPCF_1_3 = $(this).find('EPCF_1_3').text();
               var xml_EPCF_1_4 = $(this).find('EPCF_1_4').text();
               var xml_EPCF_1_5 = $(this).find('EPCF_1_5').text();
               var xml_EPCF_1_6 = $(this).find('EPCF_1_6').text();
               var xml_EPCF_2_1 = $(this).find('EPCF_2_1').text();
               var xml_EPCF_2_2 = $(this).find('EPCF_2_2').text();
               var xml_EPCF_2_3 = $(this).find('EPCF_2_3').text();
               var xml_EPCF_2_4 = $(this).find('EPCF_2_4').text();
               var xml_EPCF_2_5 = $(this).find('EPCF_2_5').text();
               var xml_EPCF_3_1 = $(this).find('EPCF_3_1').text();
               var xml_EPCF_3_2 = $(this).find('EPCF_3_2').text();
               var xml_EPCF_3_3 = $(this).find('EPCF_3_3').text();
               var xml_EPCF_3_4 = $(this).find('EPCF_3_4').text();
               var xml_EPCF_4_1 = $(this).find('EPCF_4_1').text();
               var xml_EPCF_4_2 = $(this).find('EPCF_4_2').text();
               var xml_EPCF_4_3 = $(this).find('EPCF_4_3').text();
               var xml_EPCF_4_4 = $(this).find('EPCF_4_4').text();
               var xml_EPCF_4_5 = $(this).find('EPCF_4_5').text();
               var xml_EPCF_4_6 = $(this).find('EPCF_4_6').text();
               var xml_EPCF_5_1 = $(this).find('EPCF_5_1').text();
               var xml_EPCF_5_2 = $(this).find('EPCF_5_2').text();
               var xml_EPCF_5_3 = $(this).find('EPCF_5_3').text();
               var xml_EPCF_5_4 = $(this).find('EPCF_5_4').text();
               var xml_EPCF_5_5 = $(this).find('EPCF_5_5').text();
               var xml_EPCF_5_6 = $(this).find('EPCF_5_6').text();
               var xml_EPCF_5_7 = $(this).find('EPCF_5_7').text();
               var xml_EPCF_5_8 = $(this).find('EPCF_5_8').text();
               var xml_EPCF_6_1 = $(this).find('EPCF_6_1').text();
               var xml_EPCF_6_2 = $(this).find('EPCF_6_2').text();
               var xml_EPCF_6_3 = $(this).find('EPCF_6_3').text();
               var xml_EPCF_6_4 = $(this).find('EPCF_6_4').text();
               var xml_EPCF_6_5 = $(this).find('EPCF_6_5').text();
               var xml_EPCF_6_6 = $(this).find('EPCF_6_6').text();
               var xml_EPCF_6_7 = $(this).find('EPCF_6_7').text();
               var xml_EPCF_6_8 = $(this).find('EPCF_6_8').text();
               var xml_OA1 = $(this).find('OA1').text();
               var xml_OA2 = $(this).find('OA2').text();
               var xml_OA3 = $(this).find('OA3').text();
               var xml_OA4 = $(this).find('OA4').text();
               var xml_OA5 = $(this).find('OA5').text();
               var xml_OA6 = $(this).find('OA6').text();
               var xml_OA7 = $(this).find('OA7').text();
               var xml_OA8 = $(this).find('OA8').text();
               var xml_OA9 = $(this).find('OA9').text();
               var xml_OA10 = $(this).find('OA10').text();
               var xml_VS1 = $(this).find('VS1').text();
               var xml_VS2 = $(this).find('VS2').text();
               var xml_VS3 = $(this).find('VS3').text();
               var xml_VS4 = $(this).find('VS4').text();
               var xml_VS5 = $(this).find('VS5').text();

               //begin name attr
               var xml_EPCF_1_1_name = $(this).find('EPCF_1_1').attr('name');
               var xml_EPCF_1_2_name = $(this).find('EPCF_1_2').attr('name');
               var xml_EPCF_1_3_name = $(this).find('EPCF_1_3').attr('name');
               var xml_EPCF_1_4_name = $(this).find('EPCF_1_4').attr('name');
               var xml_EPCF_1_5_name = $(this).find('EPCF_1_5').attr('name');
               var xml_EPCF_1_6_name = $(this).find('EPCF_1_6').attr('name');
               var xml_EPCF_2_1_name = $(this).find('EPCF_2_1').attr('name');
               var xml_EPCF_2_2_name = $(this).find('EPCF_2_2').attr('name');
               var xml_EPCF_2_3_name = $(this).find('EPCF_2_3').attr('name');
               var xml_EPCF_2_4_name = $(this).find('EPCF_2_4').attr('name');
               var xml_EPCF_2_5_name = $(this).find('EPCF_2_5').attr('name');
               var xml_EPCF_3_1_name = $(this).find('EPCF_3_1').attr('name');
               var xml_EPCF_3_2_name = $(this).find('EPCF_3_2').attr('name');
               var xml_EPCF_3_3_name = $(this).find('EPCF_3_3').attr('name');
               var xml_EPCF_3_4_name = $(this).find('EPCF_3_4').attr('name');
               var xml_EPCF_4_1_name = $(this).find('EPCF_4_1').attr('name');
               var xml_EPCF_4_2_name = $(this).find('EPCF_4_2').attr('name');
               var xml_EPCF_4_3_name = $(this).find('EPCF_4_3').attr('name');
               var xml_EPCF_4_4_name = $(this).find('EPCF_4_4').attr('name');
               var xml_EPCF_4_5_name = $(this).find('EPCF_4_5').attr('name');
               var xml_EPCF_4_6_name = $(this).find('EPCF_4_6').attr('name');
               var xml_EPCF_5_1_name = $(this).find('EPCF_5_1').attr('name');
               var xml_EPCF_5_2_name = $(this).find('EPCF_5_2').attr('name');
               var xml_EPCF_5_3_name = $(this).find('EPCF_5_3').attr('name');
               var xml_EPCF_5_4_name = $(this).find('EPCF_5_4').attr('name');
               var xml_EPCF_5_5_name = $(this).find('EPCF_5_5').attr('name');
               var xml_EPCF_5_6_name = $(this).find('EPCF_5_6').attr('name');
               var xml_EPCF_5_7_name = $(this).find('EPCF_5_7').attr('name');
               var xml_EPCF_5_8_name = $(this).find('EPCF_5_8').attr('name');
               var xml_EPCF_6_1_name = $(this).find('EPCF_6_1').attr('name');
               var xml_EPCF_6_2_name = $(this).find('EPCF_6_2').attr('name');
               var xml_EPCF_6_3_name = $(this).find('EPCF_6_3').attr('name');
               var xml_EPCF_6_4_name = $(this).find('EPCF_6_4').attr('name');
               var xml_EPCF_6_5_name = $(this).find('EPCF_6_5').attr('name');
               var xml_EPCF_6_6_name = $(this).find('EPCF_6_6').attr('name');
               var xml_EPCF_6_7_name = $(this).find('EPCF_6_7').attr('name');
               var xml_EPCF_6_8_name = $(this).find('EPCF_6_8').attr('name');
               var xml_OA1_name = $(this).find('OA1').attr('name');
               var xml_OA2_name = $(this).find('OA2').attr('name');
               var xml_OA3_name = $(this).find('OA3').attr('name');
               var xml_OA4_name = $(this).find('OA4').attr('name');
               var xml_OA5_name = $(this).find('OA5').attr('name');
               var xml_OA6_name = $(this).find('OA6').attr('name');
               var xml_OA7_name = $(this).find('OA7').attr('name');
               var xml_OA8_name = $(this).find('OA8').attr('name');
               var xml_OA9_name = $(this).find('OA9').attr('name');
               var xml_OA10_name = $(this).find('OA10').attr('name');


               var xml_VS1_name = $(this).find('VS1').attr('name');
               var xml_VS2_name = $(this).find('VS2').attr('name');
               var xml_VS3_name = $(this).find('VS3').attr('name');
               var xml_VS4_name = $(this).find('VS4').attr('name');
               var xml_VS5_name = $(this).find('VS5').attr('name');

               //begin id attr
               var xml_EPCF_1_1_id = $(this).find('EPCF_1_1').attr('id');
               var xml_EPCF_1_2_id = $(this).find('EPCF_1_2').attr('id');
               var xml_EPCF_1_3_id = $(this).find('EPCF_1_3').attr('id');
               var xml_EPCF_1_4_id = $(this).find('EPCF_1_4').attr('id');
               var xml_EPCF_1_5_id = $(this).find('EPCF_1_5').attr('id');
               var xml_EPCF_1_6_id = $(this).find('EPCF_1_6').attr('id');
               var xml_EPCF_2_1_id = $(this).find('EPCF_2_1').attr('id');
               var xml_EPCF_2_2_id = $(this).find('EPCF_2_2').attr('id');
               var xml_EPCF_2_3_id = $(this).find('EPCF_2_3').attr('id');
               var xml_EPCF_2_4_id = $(this).find('EPCF_2_4').attr('id');
               var xml_EPCF_2_5_id = $(this).find('EPCF_2_5').attr('id');
               var xml_EPCF_3_1_id = $(this).find('EPCF_3_1').attr('id');
               var xml_EPCF_3_2_id = $(this).find('EPCF_3_2').attr('id');
               var xml_EPCF_3_3_id = $(this).find('EPCF_3_3').attr('id');
               var xml_EPCF_3_4_id = $(this).find('EPCF_3_4').attr('id');
               var xml_EPCF_4_1_id = $(this).find('EPCF_4_1').attr('id');
               var xml_EPCF_4_2_id = $(this).find('EPCF_4_2').attr('id');
               var xml_EPCF_4_3_id = $(this).find('EPCF_4_3').attr('id');
               var xml_EPCF_4_4_id = $(this).find('EPCF_4_4').attr('id');
               var xml_EPCF_4_5_id = $(this).find('EPCF_4_5').attr('id');
               var xml_EPCF_4_6_id = $(this).find('EPCF_4_6').attr('id');
               var xml_EPCF_5_1_id = $(this).find('EPCF_5_1').attr('id');
               var xml_EPCF_5_2_id = $(this).find('EPCF_5_2').attr('id');
               var xml_EPCF_5_3_id = $(this).find('EPCF_5_3').attr('id');
               var xml_EPCF_5_4_id = $(this).find('EPCF_5_4').attr('id');
               var xml_EPCF_5_5_id = $(this).find('EPCF_5_5').attr('id');
               var xml_EPCF_5_6_id = $(this).find('EPCF_5_6').attr('id');
               var xml_EPCF_5_7_id = $(this).find('EPCF_5_7').attr('id');
               var xml_EPCF_5_8_id = $(this).find('EPCF_5_8').attr('id');
               var xml_EPCF_6_1_id = $(this).find('EPCF_6_1').attr('id');
               var xml_EPCF_6_2_id = $(this).find('EPCF_6_2').attr('id');
               var xml_EPCF_6_3_id = $(this).find('EPCF_6_3').attr('id');
               var xml_EPCF_6_4_id = $(this).find('EPCF_6_4').attr('id');
               var xml_EPCF_6_5_id = $(this).find('EPCF_6_5').attr('id');
               var xml_EPCF_6_6_id = $(this).find('EPCF_6_6').attr('id');
               var xml_EPCF_6_7_id = $(this).find('EPCF_6_7').attr('id');
               var xml_EPCF_6_8_id = $(this).find('EPCF_6_8').attr('id');
               var xml_OA1_id = $(this).find('OA1').attr('id');
               var xml_OA2_id = $(this).find('OA2').attr('id');
               var xml_OA3_id = $(this).find('OA3').attr('id');
               var xml_OA4_id = $(this).find('OA4').attr('id');
               var xml_OA5_id = $(this).find('OA5').attr('id');
               var xml_OA6_id = $(this).find('OA6').attr('id');
               var xml_OA7_id = $(this).find('OA7').attr('id');
               var xml_OA8_id = $(this).find('OA8').attr('id');
               var xml_OA9_id = $(this).find('OA9').attr('id');
               var xml_OA10_id = $(this).find('OA10').attr('id');
               var xml_VS1_id = $(this).find('VS1').attr('id');
               var xml_VS2_id = $(this).find('VS2').attr('id');
               var xml_VS3_id = $(this).find('VS3').attr('id');
               var xml_VS4_id = $(this).find('VS4').attr('id');
               var xml_VS5_id = $(this).find('VS5').attr('id');

               //In this installment of FML, we're going to build an Array
               xmlArr += "<table id='opttable' align='left'><tr><td>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_1_1_id + "' name='" + xml_EPCF_1_1_id + "' /><label for='epcf11'>" + xml_EPCF_1_1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_1_2_id + "' name='" + xml_EPCF_1_2_id + "' /><label for='epcf12'>" + xml_EPCF_1_2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_1_3_id + "' name='" + xml_EPCF_1_3_id + "' /><label for='epcf13'>" + xml_EPCF_1_3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_1_4_id + "' name='" + xml_EPCF_1_4_id + "' /><label for='epcf14'>" + xml_EPCF_1_4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_1_5_id + "' name='" + xml_EPCF_1_5_id + "' /><label for='epcf15'>" + xml_EPCF_1_5_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_1_6_id + "' name='" + xml_EPCF_1_6_id + "' /><label for='epcf15'>" + xml_EPCF_1_6_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_2_1_id + "' name='" + xml_EPCF_2_1_id + "' /><label for='epcf11'>" + xml_EPCF_2_1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_2_2_id + "' name='" + xml_EPCF_2_2_id + "' /><label for='epcf12'>" + xml_EPCF_2_2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_2_3_id + "' name='" + xml_EPCF_2_3_id + "' /><label for='epcf13'>" + xml_EPCF_2_3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_2_4_id + "' name='" + xml_EPCF_2_4_id + "' /><label for='epcf14'>" + xml_EPCF_2_4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_2_5_id + "' name='" + xml_EPCF_2_5_id + "' /><label for='epcf15'>" + xml_EPCF_2_5_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_3_1_id + "' name='" + xml_EPCF_3_1_id + "' /><label for='epcf11'>" + xml_EPCF_3_1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_3_2_id + "' name='" + xml_EPCF_3_2_id + "' /><label for='epcf12'>" + xml_EPCF_3_2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_3_3_id + "' name='" + xml_EPCF_3_3_id + "' /><label for='epcf13'>" + xml_EPCF_3_3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_3_4_id + "' name='" + xml_EPCF_3_4_id + "' /><label for='epcf14'>" + xml_EPCF_3_4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_4_1_id + "' name='" + xml_EPCF_4_1_id + "' /><label for='epcf11'>" + xml_EPCF_4_1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_4_2_id + "' name='" + xml_EPCF_4_2_id + "' /><label for='epcf12'>" + xml_EPCF_4_2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_4_3_id + "' name='" + xml_EPCF_4_3_id + "' /><label for='epcf13'>" + xml_EPCF_4_3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_4_4_id + "' name='" + xml_EPCF_4_4_id + "' /><label for='epcf14'>" + xml_EPCF_4_4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_4_5_id + "' name='" + xml_EPCF_4_5_id + "' /><label for='epcf15'>" + xml_EPCF_4_5_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_4_6_id + "' name='" + xml_EPCF_4_6_id + "' /><label for='epcf15'>" + xml_EPCF_4_6_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_1_id + "' name='" + xml_EPCF_5_1_id + "' /><label for='epcf11'>" + xml_EPCF_5_1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_2_id + "' name='" + xml_EPCF_5_2_id + "' /><label for='epcf12'>" + xml_EPCF_5_2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_3_id + "' name='" + xml_EPCF_5_3_id + "' /><label for='epcf13'>" + xml_EPCF_5_3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_4_id + "' name='" + xml_EPCF_5_4_id + "' /><label for='epcf14'>" + xml_EPCF_5_4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_5_id + "' name='" + xml_EPCF_5_5_id + "' /><label for='epcf15'>" + xml_EPCF_5_5_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_6_id + "' name='" + xml_EPCF_5_6_id + "' /><label for='epcf15'>" + xml_EPCF_5_6_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_7_id + "' name='" + xml_EPCF_5_7_id + "' /><label for='epcf15'>" + xml_EPCF_5_7_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_5_8_id + "' name='" + xml_EPCF_5_8_id + "' /><label for='epcf15'>" + xml_EPCF_5_8_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_1_id + "' name='" + xml_EPCF_6_1_id + "' /><label for='epcf11'>" + xml_EPCF_6_1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_2_id + "' name='" + xml_EPCF_6_2_id + "' /><label for='epcf12'>" + xml_EPCF_6_2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_3_id + "' name='" + xml_EPCF_6_3_id + "' /><label for='epcf13'>" + xml_EPCF_6_3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_4_id + "' name='" + xml_EPCF_6_4_id + "' /><label for='epcf14'>" + xml_EPCF_6_4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_5_id + "' name='" + xml_EPCF_6_5_id + "' /><label for='epcf15'>" + xml_EPCF_6_5_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_6_id + "' name='" + xml_EPCF_6_6_id + "' /><label for='epcf15'>" + xml_EPCF_6_6_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_7_id + "' name='" + xml_EPCF_6_7_id + "' /><label for='epcf15'>" + xml_EPCF_6_7_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_EPCF_6_8_id + "' name='" + xml_EPCF_6_8_id + "' /><label for='epcf15'>" + xml_EPCF_6_8_name + "</label><br/>";
               xmlArr += "</td><td>";
               //Build OA
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA1_id + "' name='" + xml_OA1_id + "' /><label for='oa1'>" + xml_OA1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA2_id + "' name='" + xml_OA2_id + "' /><label for='oa2'>" + xml_OA2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA3_id + "' name='" + xml_OA3_id + "' /><label for='oa3'>" + xml_OA3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA4_id + "' name='" + xml_OA4_id + "' /><label for='oa4'>" + xml_OA4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA5_id + "' name='" + xml_OA5_id + "' /><label for='oa5'>" + xml_OA5_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA6_id + "' name='" + xml_OA6_id + "' /><label for='oa6'>" + xml_OA6_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA7_id + "' name='" + xml_OA7_id + "' /><label for='oa7'>" + xml_OA7_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA8_id + "' name='" + xml_OA8_id + "' /><label for='oa8'>" + xml_OA8_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA9_id + "' name='" + xml_OA9_id + "' /><label for='oa9'>" + xml_OA9_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_OA10_id + "' name='" + xml_OA10_id + "' /><label for='oa10'>" + xml_OA10_name + "</label><br/>";
               xmlArr += "</td><td>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_VS1_id + "' name='" + xml_VS1_id + "' /><label for='vs1'>" + xml_VS1_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_VS2_id + "' name='" + xml_VS2_id + "' /><label for='vs2'>" + xml_VS2_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_VS3_id + "' name='" + xml_VS3_id + "' /><label for='vs3'>" + xml_VS3_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_VS4_id + "' name='" + xml_VS4_id + "' /><label for='vs4'>" + xml_VS4_name + "</label><br/>";
               xmlArr += "<input class='checkbox' type='checkbox' id='" + xml_VS5_id + "' name='" + xml_VS5_id + "' /><label for='vs5'>" + xml_VS5_name + "</label><br/>";
               xmlArr += "</td></tr></table>";
               div.append(xmlArr);
               $(":input[type='checkbox']").wijcheckbox();
            }

         });

      }
   });
}

`var xml_OA7` .... You need to learn about hash tables. This should be `var xml = {}; xml["OA7"] = .... `. And if the key is always the same as the XPath expression, you can use a loop to fill the whole data structure in one go. — Thilo, Feb 03 '12 at 04:02
@Thilo - I'm googling hash tables right now - do you remember how you learned? Any good references? — ChadM, Feb 03 '12 at 04:11
You can almost certainly eliminate 95% of this code. I would imagine that the XML has a consistent structure. If so, you can use this to your advantage, and replace all that repetition with probably just a few lines. But without seeing a sample of the XML, it's pretty hard to give an example of how to do it. — , Feb 03 '12 at 04:18
@amnotiam The post was limited due to size so I have it online here: http://mdihosting.com/5/Projects/VRACC/xml/categories.xml — ChadM, Feb 03 '12 at 04:22

score 2 · Accepted Answer · 2012-02-03T14:45:22.953

Here's my take on the success callback.

I removed the if (catname === cval) { because I don't know what catname represents. If you were trying to filter a particular category, then there's probably a different way.

function onchange1(catname) {
    $("#oatable tbody tr").empty();
    $("#epcftable tbody tr").empty();
    $.ajax({
        type: "GET",
        url: "xml/categories.xml",
        dataType: "xml",
        success: function(xml) {

            var table = $('<table>', {id: 'opttable',align: 'left'});

                // get the Category for the catname passed
            var category = $(xml).children().children('Cat[name="' + catname + '"]');

            var tr = $('<tr>').appendTo(table); // create TR and append to TABLE
            var td = $('<td>').appendTo(tr); // create TD and append to TR

                // iterate all children of the current Category
            category.children().each(function(i, cat_child) {

                   // Grab the name and ID of the current item
                var id = $(cat_child).attr('id');
                var name = $(cat_child).attr('name');

                    // create INPUT with the attributes of the current
                    //   child of Cat, and append to the TD
                $('<input>', {
                    className: 'checkbox',
                    type: 'checkbox',
                    id: id,
                    name: id
                }).appendTo(td);
                    // create LABEL with the id attribute of the current
                    //   child of Cat and append to TD
                $('<label>', {for: id, text:name}).appendTo(td);

                $('<br>').appendTo(td); // create BR element and append to TD
            });
            $('#epcf-wrap').empty().append(table); // Append the table to its container
        }
    });
}

You're correct. The argument catname is passed from the onclick and represents the Category Name as an option from a dropdown list. i.e., User select dropdown "Category 1" and this code executes against Category 1 from the XML — ChadM, Feb 03 '12 at 05:25
@ChadM: In that case, you can change `$(xml).children('Cat')` to `$(xml).children('Cat[name=" + catname + "]')`. In fact, since there's only one being created, we could actually do it without the outermost `.each()` loop. — , Feb 03 '12 at 05:26
Forgot some quotes: `$(xml).children('Cat[name="' + catname + '"]')` ...and updated my answer. — , Feb 03 '12 at 05:32
You asked what that was for - The full source is here: http://mdihosting.com/5/Projects/VRACC/index.html - as you'll see there the code goes on for another 50 or so lines running a function to check the boxes and creating them using the wijcheckbox style from wijmo. The original post length limitation wouldn't allow me to post the entire code, but I'm realizing now that another for loop is needed to go through and check all the checkboxes :( — ChadM, Feb 03 '12 at 06:21
I really think this is a fantastic approach - I've tried to build a test of the code above here: http://mdihosting.com/5/Projects/VRACC/iterate.html - No error but no result either — ChadM, Feb 03 '12 at 13:36
@ChadM: I just fixed it up a bit, and tested on your site. Seems to work. I should have had `.find()` or `.children().children()` instead of just `.children()` to get the `Category` nodes. Made a couple other fixed too. I'll update in a second. — , Feb 03 '12 at 14:41

score 1 · Answer 2 · edited May 23 '17 at 11:56

You could serialize the xml in json, so if response is input parameter of success function you can get length of data by

response.length

json is usually more manageable with javascript. Probably you can get length of xml object in same way with xml.length

Consider also method size() of jquery http://api.jquery.com/size/

Additionally, when you execute $(this).find('EPCF_1_1') $(this).find('EPCF_1_2') etc. you can substite all these lines by finding with regular expression. An example

$(this+':regex(attribute_name, EPCF_1_[0-9])')

or

$('cat_or_element_name:regex(attribute_name, regular_expression)')

Check jQuery selector regular expressions

score 1 · Answer 3 · answered Feb 03 '12 at 04:30

Not sure what the code is trying to do but I would probably write it like this:

/*
 * We use array instead of object because order matters:
 */
var value_ranges = [
  [
    ['EPCF_1_', 6],
    ['EPCF_2_', 5],
    ['EPCF_3_', 4],
    ['EPCF_4_', 6],
    ['EPCF_5_', 8],
    /* I think you know where this is going ... */
  ],
  [
    ['0A', 10]
  ],
  [
    ['VS', 5]
  ]
]

var html_string = "";
for (var x=0; x<value_ranges.length; x++) {
  var inner_ranges = value_ranges[x];

  for (var y=0; y<inner_ranges.length; y++) {
    var key = inner_ranges[y][0];
    var range = inner_ranges[y][1];

    html_string += '<td>';
    for (var z=1; z<=range; z++) {
      var txt = $(this).find(key+z).text();
      var name = $(this).find(key+z).attr('name');
      var id = $(this).find(key+z).attr('id');

      html_string += "<input class='checkbox' type='checkbox' id='" + id + "' name='" + id + "' /><label for='" + id + "'>" + name + "</label><br/>";
    }
    html_string += '</td>';
}

Now all you need to do is maintain that array.

Though I have to say, using tables for layout is not really nice.

If there is a way to get a count of the # of EPCF and OA and VS from the XML could that be used instead of updating the array? — ChadM, Feb 03 '12 at 04:37

JavaScript - Just learning FOR

3 Answers3