CODEWITHSUNDEEP
javascriptjquery
muhammad umar farooq frank
muhammad umar farooq frank

Reputation: 251

Apply condition from variable string

I have condition select box like :

Select Column
Select Operator 
 <option value="">Choose operator</option>
 <option value="=">Equals</option>
 <option value="!=">Does not equal</option>
 <option value="LIKE%%">Contains</option>
 <option value="NOT LIKE%%">Does not contain</option>
 <option value="<">Less then (&lt;)</option>
 <option value=">">Greater then (&gt;)</option>
 <option value="<=">Equals or less then (&lt;=)</option>
 <option value=">=">Equals or greater (&gt;=)</option>
AND Value

I have got all of these in an Array Like :

var filterby = [];
    $.each(panels, function(index, row) {
        var obj = {};
        obj['column'] = $(row).find('.dt_column').val();
        obj['operator'] = $(row).find('.dt_operator').val();
        obj['value'] = $(row).find('.dt_value').val();
        filterby.push(obj);
    });

Now i have filterby array and want to implement them onto an array.

i am here :

var generatedData=tableData.filter(function(index,data){
    $.each(conditions,function(index,condition){
        if(data[condition.column])

    });
});

Upvotes: 2

Views: 101

Answers (1)

Travis J
Travis J

Reputation: 82267

Without html or any correlating names, this is going to be a little bit generic. I will just start with your set of conditional statements.

<option value="">Choose operator</option>
<option value="=">Equals</option>
<option value="!=">Does not equal</option>
<option value="LIKE%%">Contains</option>
<option value="NOT LIKE%%">Does not contain</option>
<option value="<">Less then (&lt;)</option>
<option value=">">Greater then (&gt;)</option>
<option value="<=">Equals or less then (&lt;=)</option>
<option value=">=">Equals or greater (&gt;=)</option>

You are going to have to translate these to functions, which expect to be called with a left side and right side argument.

var conditionalFunctions = {
    "=" : function(left,right){ return left === right },
    "!=" : function(left,right){ return left !== right },
    "LIKE%%" : function(left,right){ return left.indexOf(right) > -1 },
    "NOT LIKE%%" : function(left,right){ return left.indexOf(right) == -1 },
    "<" : function(left,right){ return left < right },
    ">" : function(left,right){ return left > right },
    "<=" : function(left,right){ return left <= right },
    ">=" : function(left,right){ return left >= right }
};

And then call these from based on the selected value from your earlier options and use the arguments from whatever the current row values are.

var conditionalFunctions = {
        "=" : function(left,right){ return left === right },
        "!=" : function(left,right){ return left !== right },
        "LIKE%%" : function(left,right){ return left.indexOf(right) > -1 },
        "NOT LIKE%%" : function(left,right){ return left.indexOf(right) == -1 },
        "<" : function(left,right){ return left < right },
        ">" : function(left,right){ return left > right },
        "<=" : function(left,right){ return left <= right },
        ">=" : function(left,right){ return left >= right }
    };

var oper = document.querySelector("#operator"),
    rows = document.querySelectorAll(".row");
document.querySelector("#compare").onclick = function(){
    var func = conditionalFunctions[oper.value];
    for(var i = 0; i < rows.length; i++){
        var row = rows[i],
            left = row.querySelector(".left").innerText,
            right = row.querySelector(".right").innerText;
        row.querySelector(".op").innerText = oper.value;
        row.querySelector(".result").innerText = func(left,right);
       
    }
};
.row span { margin : 5px; }
.result { color: red; }
<select id="operator">
    <option value="">Choose operator</option>
    <option value="=">Equals</option>
    <option value="!=">Does not equal</option>
    <option value="LIKE%%">Contains</option>
    <option value="NOT LIKE%%">Does not contain</option>
    <option value="<">Less then (&lt;)</option>
    <option value=">">Greater then (&gt;)</option>
    <option value="<=">Equals or less then (&lt;=)</option>
    <option value=">=">Equals or greater (&gt;=)</option>
</select>
<button type="button" id="compare">Compare</button>
<div class="row">
  <span class="left">1</span>
  <span class="op"></span>
  <span class="right">2</span>
  <span class="result"></span>
</div>
<div class="row">
  <span class="left">2</span>
  <span class="op"></span>
  <span class="right">2</span>
  <span class="result"></span>
</div>
<div class="row">
  <span class="left">"hello"</span>
  <span class="op"></span>
  <span class="right">"h"</span>
  <span class="result"></span>
</div>

Upvotes: 2

Related Questions