title: How to create if conditional statement from string within javascript for loop without using eval()
body: <p>I'm trying to create an advance search function to use on a multi-dimensional array of product objects. On the form, the user will have the option of narrowing down product results based on data in several different attributes (e.g. "'price' &lt; 20 &amp;&amp; 'country' == 'France'", "region == 'New York' &amp;&amp; 'vintage' == '2016' &amp;&amp; 'qty > 20"). The data, within variable <code>data</code> is formatted as follows:</p>
  
  <pre><code>    0:
          name: "Kedem Cream Red Concord"
          appellation: "New York"
          country: "United States"
          price: "10.99"
          primarygrape: "Concord"
          qty: "1" 
          region: "New York"
          regprice: "10.99"
          sku: "230"
          vintage: "NV"
      1:
          name: "Kendall Jackson Vintner's Chardonnay" 
          appellation: "" 
          country: "United States" 
          price: "14.99" 
          primarygrape: "Chardonnay"
          qty: "35" 
          region: "California" 
          regprice: "18.99"
          sku: "345" 
          vintage: "2016"
  ... continuing on over 10,000 product records
  </code></pre>
  
  <p>I figured I could create a string based on the user form input fairly easily that sums up what they're searching for. However, I need a safe way to evaluate that string within my function that returns the filtered results in <code>resultsArray</code></p>
  
  <p>I was able to get it to work with the <code>eval()</code> function, but I know that's not safe or efficient. I also tried fooling around with putting the conditions into an array and trying to incorporate that into the for loop, but I couldn't figure out how to make it work. The tricky part is, the conditions could be any number of things involving the following product attributes: <strong>appellation, country, price, primarygrape, qty, region, vintage</strong>. And different attributes use different operators (e.g. country, region, and others use '==' while qty and price use '>' or '&lt;').</p>
  
  <p>This code works, but uses the taboo <code>eval()</code> function:</p>
  
  <pre><code>var conditional = "data[i].price &lt; 20 &amp;&amp; data[i].country == 'France' &amp;&amp; data[i].vintage == '2016'";
  
  var resultArray = [];
  console.log(data.length);
  for (var i = 0; i &lt; data.length; i++)
  {
      if (eval(conditional))
          {
              resultArray.push(data[i]);
          }
      }
  }
  
  </code></pre>
  
  <p>This doesn't work, as it results in a <code>Uncaught ReferenceError: data is not defined</code> error:</p>
  
  <pre><code>var conditional = "return data[i].price &lt; 20 &amp;&amp; data[i].country == 'France' &amp;&amp; data[i].vintage == '2016'";
  
  var resultArray = [];
  console.log(data.length);
  for (var i = 0; i &lt; data.length; i++)
  {
      if (new Function(conditional)())
          {
              resultArray.push(data[i]);
          }
      }
  }
  </code></pre>
  
  <p>Any idea how to dynamically create that if conditional statement so that it recognizes the <code>data</code> variable? Or, is there a better solution?</p>