Writing dynamic conditional statement in javascript

Question

I am creating a multistep form where a value (or multiples) of a form field determine whether a subsequent step is shown.

For example, the data I am receiving looks like:

{
    cardConditional:
        lessThan: 75
        show: true
        when: "fieldKeyHere"
    ...
}

This is basically telling me, if the when is lessThan 75 show the step. it can return greaterThan or eq as well which i've accounted for in the code below. My question is how can i take that information and construct a function to return true or false depending on that? I guess im stuck on how to string together that conditional with the string from getMathSymbol.

Here's what i have so far:

const checkStepConditional = (step) => {
    const getMathSymbol = () => {
      if (step.cardConditional.eq) return "===";
      else if (step.cardConditional.lessThan) return "<";
      else if (step.cardConditional.greaterThan) return ">";
    };

    if (step.cardConditional) {
      const conditionalFieldKey = step.cardConditional.when;
      return form.values[conditionalFieldKey]  <-- stuck here
    } else {
      return true;
    }
};

Will you always have one of the properties eq, lessThan and greaterThan on a cardCditional step. — Nick Parsons
– Nick Parsons, Commented Jun 11, 2022 at 1:37

pilchard · Accepted Answer · 2022-06-11 01:54:03Z

3

You can create an object keyed by the conditions which each implements the method necessary for the comparison, and use an every() on the conditions that exist in your cardConditional object to check of all conditions match.

const checkStepConditional = (form, step) => {
  const checkIf = {
    eq: (a, b) => a === b,
    lessThan: (a, b) => a < b,
    greaterThan: (a, b) => a > b,
  }

  if (step.cardConditional) {
    const cardCond = step.cardConditional;
    const field = form.values[cardCond.when];
    const conditions = Object.keys(checkIf).filter(k => k in cardCond);
    return conditions.every(condition => checkIf[condition](field, cardCond[condition]))
      ? cardCond.show
      : !cardCond.show
  }
};

const
  card = { cardConditional: { lessThan: 75, show: true, when: "fieldKeyHere", } },
  form = { values: { "fieldKeyHere": 60 } };
  console.log(checkStepConditional(form, card)); 
  // 60 < 75 ? show: true

const
  card1 = { cardConditional: { lessThan: 75, greaterThan: 60, show: true, when: "fieldKeyHere", } },
  form1 = { values: { "fieldKeyHere": 65 } };
  console.log(checkStepConditional(form1, card1)); 
  // 65 < 75 && 65 > 60 ? show: true

const
  card2 = { cardConditional: { lessThan: 75, greaterThan: 60, show: true, when: "fieldKeyHere", } },
  form2 = { values: { "fieldKeyHere": 55 } };
  console.log(checkStepConditional(form2, card2)); 
  // 55 < 75 && 55 > 60 ? show: false

edited Jun 11, 2022 at 1:54

answered Jun 11, 2022 at 1:47

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Over a year ago

Amazing - i love this approach. I was simply just going to eval() the combined string though thats 100% not the way to go. You nailed it - thanks!

Collectives™ on Stack Overflow

Writing dynamic conditional statement in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related