title: Filter list items
body: <p>I have a list of items i pull from SharePoint and want to filter them in my custom list view page.</p>
  
  <p>So my function works exactly how I want it but it seems messy and I'm hoping someone could point me to or explain a better way of achieving this or an "optimized" version of what I did.</p>
  
  <p>I'm using a for loop with if to compare the values and display only when true.
  I have multiple filters and this is where it became tricky to me.</p>
  
  <p>In below code example:</p>
  
  <ul>
  <li><code>incarr</code> array contains the list items.</li>
  <li>arri = number of items in list received from SharePoint list</li>
  </ul>
  
  <p>Code:</p>
  
  <pre><code>function displaytable() {                               
      document.getElementById("myHTMLTable").innerHTML = "";
      $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
    "&lt;th align='left'&gt;"+"&lt;b&gt;Systems Affected&lt;/b&gt;"+"&lt;/th&gt;" +
    "&lt;th width= 5% align='left'&gt;"+"&lt;b&gt;Incident Date&lt;/b&gt;"+"&lt;/th&gt;" +                   
      "&lt;th align='left'&gt;"+"&lt;b&gt;Incident Number&lt;/b&gt;"+"&lt;/th&gt;" +
    "&lt;th align='left'&gt;"+"&lt;b&gt;Root Cause&lt;/b&gt;"+"&lt;/th&gt;" +
      "&lt;th align='left'&gt;"+"&lt;b&gt;Description&lt;/b&gt;"+"&lt;/th&gt;" + 
      "&lt;th width= 6% align='left'&gt;"+"&lt;b&gt;Attachments&lt;/b&gt;"+"&lt;/th&gt;" +                                         
    "&lt;/tr&gt;");                 
      var filtery = document.getElementById("dropdownyear").value;
      var filterm = document.getElementById("dropdownmonth").value.toUpperCase();
      var filters = document.getElementById("dropdownsystem").value.toUpperCase();
      var filtersev = document.getElementById("dropdownseverity").value.toUpperCase();                
      for (i=0;i&lt;arri;i++){
          //manual if statements until I can figure our a more effective way                                  
          if (incarr[i][6] == filtery &amp;&amp; incarr[i][5] == filterm &amp;&amp; incarr[i][0].toUpperCase() == filters &amp;&amp; filtersev == incarr[i][7].toUpperCase()){                                                
              $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +  //full filter
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" + 
              "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +
              "&lt;/tr&gt;");                       
          } else if (incarr[i][6] == filtery &amp;&amp; incarr[i][5] == filterm &amp;&amp; filters == "SYSTEM" &amp;&amp; filtersev == incarr[i][7].toUpperCase() ) {
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //system filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                                                    
          "&lt;/tr&gt;");
          } else if (incarr[i][6] == filtery &amp;&amp; filterm == "MONTH" &amp;&amp; incarr[i][0].toUpperCase() == filters &amp;&amp; filtersev == incarr[i][7].toUpperCase() ){
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //Month filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                           
          "&lt;/tr&gt;");
          } else if (incarr[i][6] == filtery &amp;&amp; filterm == "MONTH" &amp;&amp; filters == "SYSTEM" &amp;&amp; filtersev ==  incarr[i][7].toUpperCase() ){
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //Month &amp; System filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                          
          "&lt;/tr&gt;");
          } else if (filtery == "YEAR" &amp;&amp; filterm == "MONTH" &amp;&amp; incarr[i][0].toUpperCase() == filters &amp;&amp; filtersev == incarr[i][7].toUpperCase() ){
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //Year &amp; Month filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                           
                  "&lt;/tr&gt;");
          } else if (incarr[i][6] == filtery &amp;&amp; incarr[i][5] == filterm &amp;&amp; filters == "SYSTEM" &amp;&amp; filtersev == "SEVERITY" ) {
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //system, severity filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                           
          "&lt;/tr&gt;");
          } else if (incarr[i][6] == filtery &amp;&amp; filterm == "MONTH" &amp;&amp; incarr[i][0].toUpperCase() == filters &amp;&amp; filtersev == "SEVERITY" ){
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //Month, severity filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                            
          "&lt;/tr&gt;");
          } else if (incarr[i][6] == filtery &amp;&amp; filterm == "MONTH" &amp;&amp; filters == "SYSTEM" &amp;&amp; filtersev == "SEVERITY" ){
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +  //Month &amp; System &amp; Severity filter all
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                            
          "&lt;/tr&gt;");
          } else if (filtery == incarr[i][6] &amp;&amp;  filterm == incarr[i][5] &amp;&amp; incarr[i][0].toUpperCase() == filters &amp;&amp; filtersev == "SEVERITY"){                                                                    
                  $("#myHTMLTable").append("&lt;tr align='middle'&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][0]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][1]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][2]+"&lt;/td&gt;" +  //Severity filter all
          "&lt;td align='left'&gt;"+incarr[i][3]+"&lt;/td&gt;" +
          "&lt;td align='left'&gt;"+incarr[i][4]+"&lt;/td&gt;" +
                  "&lt;td align='left'&gt;"+incarr[i][8]+"&lt;/td&gt;" +                                           
                  "&lt;/tr&gt;");
          };
      }                           
  }
  </code></pre>
  
  <p>when selecting a filter it must only display items matching that column, and I must be able to select multiple filters to filter the filtered list (if this makes sense?)</p>