Generating if-else dynamically based on if the number entered is greater, less or equal

Question

I have data in this format:

HTML:

<div class="data-table">
  <div class="data-table-item" sign="<" val="10000" result="1"></div>
  <div class="data-table-item" sign=">=" val="10000" result="2"></div>
  <div class="data-table-item" sign=">=" val="25000" result="3"></div>
  <div class="data-table-item" sign=">=" val="50000" result="4"></div>
</div>

JS:

var user_Value = 26000;

I am trying to generate if-else dynamically so that if the user enters 26000 it should give me Result = 3 by detecting the sign attribute accordingly.

The above structure is dynamic so I can't use static if-else conditions.

Here is the JSFiddle

Please help.

So ... something like `operations = { '<': (x, y) => x < y, '>=': (x, y) => x >= y, ... }` might work? .... `if (operations[sign](a, b)) ...` — Tibrogargan, Jan 26 '20 at 04:17
You should at least attempt to solve this yourself. If you can't, show what you have attempted and explain what you're having trouble with. Someone will help. — Tibrogargan, Jan 26 '20 at 04:28
Hey, Thanks for the suggestion, I have worked out a solution. Is there any better way to do this? [JSFiddle](https://jsfiddle.net/WebDev93/7fjaqgpu/1/) — piyush7931, Jan 26 '20 at 05:33

score 2 · Answer 1 · answered Jan 26 '20 at 06:46

This is possible using eval() function which executes JavaScript code in form of string

Try to understand from the below code:

var userval = 26000;
$(".data-table").find("*").each(function(){
 var val = $(this).attr("val");
 var c = $(this).attr("sign");
 var exec = `${userval} ${c} ${val}`;
 console.log(exec);
 console.log(eval(exec));
 if(eval(exec)){
  $(this).text(userval);
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-table">
  <div class="data-table-item" sign="<" val="10000" result="1"></div>
  <div class="data-table-item" sign=">=" val="10000" result="2"></div>
  <div class="data-table-item" sign=">=" val="25000" result="3"></div>
  <div class="data-table-item" sign=">=" val="50000" result="4"></div>
</div>

Only problem with this is the use of `eval()`. See [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) and [this](https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea). Consider adding a mapping from "sign" to some method. — Tibrogargan, Jan 26 '20 at 09:53

score 0 · Answer 2 · answered Jan 26 '20 at 09:56

The code you've written doesn't actually do what your question asks for (@RiteshKhandekar's answer does what you asked for). If you assume that your brackets are in ascending order then your code works, but it's perhaps not the best. Your requirement actually seems to be closer to "find the last element in a sorted array that is smaller than some dynamically selected target".

Since you said your structure is dynamically created, writing code that examines each possibility is not going to work. You need to build something capable of dealing with arbitrary data. You could do it with something like the following:

// binary search implementation, since the data is sorted
function last(array, target) 
{  
    let start = 0
    let end = array.length-1;  

    let index = -1;  
    while (start <= end) {  
        let mid = ~~((start + end) / 2);
        if (array[mid] >= target) {  
            end = mid - 1;  
        }  
        else {  
            index = mid;  
            start = mid + 1;  
        }  
    }  
    return index
}

let divs = $(".data-table>div")
let values = []

// Generate an array from the set of values in the HTML
divs.each(function(){
    values.push(parseInt(this.getAttribute('val')) )
})

// find the last index smaller than the target value
let index = last(values, 26000)
// add error checking for index == -1
// do something with the index
console.log(divs.get(index).getAttribute('result'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-table">
  <div class="data-table-item" sign="<" val="10000" result="1"></div>
  <div class="data-table-item" sign=">=" val="10000" result="2"></div>
  <div class="data-table-item" sign=">=" val="25000" result="3"></div>
  <div class="data-table-item" sign=">=" val="50000" result="4"></div>
</div>

Generating if-else dynamically based on if the number entered is greater, less or equal

2 Answers2