How to minimize the if statement in javascript

Question

I have a very long if-conditional statement. How can I minimize it? Here is my code,

if(this.refs.category.value.trim() != "" &&
        this.refs.decisive_min.value.trim() != "" && this.refs.decisive_max.value.trim() != "" &&
        this.refs.interactive_min.value.trim() != "" && this.refs.interactive_max.value.trim() != "" &&
        this.refs.stabilizing_min.value.trim() != "" && this.refs.stabilizing_max.value.trim() != "" &&
        this.refs.cautious_min.value.trim() != "" && this.refs.cautious_max.value.trim() != "" &&
        this.refs.aesthetic_min.value.trim() != "" && this.refs.aesthetic_max.value.trim() != "" &&
        this.refs.economic_min.value.trim() != "" && this.refs.economic_max.value.trim() != "" &&
        this.refs.individualistic_min.value.trim() != "" && this.refs.individualistic_max.value.trim() != "" &&
        this.refs.political_min.value.trim() != "" && this.refs.political_max.value.trim() != "" &&
        this.refs.altruist_min.value.trim() != "" && this.refs.altruist_max.value.trim() != "" &&
        this.refs.regulatory_min.value.trim() != "" && this.refs.regulatory_max.value.trim() != "" &&
        this.refs.theoretical_min.value.trim() != "" && this.refs.theoretical_max.value.trim() != ""){
        var data = {category:this.refs.category.value.trim()};
        data.decisive_min = this.refs.decisive_min.value.trim();
        data.decisive_max = this.refs.decisive_max.value.trim();
        data.interactive_min = this.refs.interactive_min.value.trim();
        data.interactive_max = this.refs.interactive_max.value.trim();
        data.stabilizing_min = this.refs.stabilizing_min.value.trim();
        data.stabilizing_max = this.refs.stabilizing_max.value.trim();
        data.cautious_min = this.refs.cautious_min.value.trim();
        data.cautious_max = this.refs.cautious_max.value.trim();
        data.aesthetic_min = this.refs.aesthetic_min.value.trim();
        data.aesthetic_max = this.refs.aesthetic_max.value.trim();
        data.economic_min = this.refs.economic_min.value.trim();
        data.economic_max = this.refs.economic_max.value.trim();
        data.individualistic_max = this.refs.individualistic_max.value.trim();
        data.individualistic_min = this.refs.individualistic_min.value.trim();
        data.political_min = this.refs.political_min.value.trim();
        data.political_max = this.refs.political_max.value.trim();
        data.altruist_min = this.refs.altruist_min.value.trim();
        data.altruist_max = this.refs.altruist_max.value.trim();
        data.regulatory_min = this.refs.regulatory_min.value.trim();
        data.regulatory_max = this.refs.regulatory_max.value.trim();
        data.theoretical_min = this.refs.theoretical_min.value.trim();
        data.theoretical_max = this.refs.theoretical_max.value.trim();

I just want to check all the values in the form if they are all not empty string.

I used refs by React JS in Meteor.

Answer 1

You could use an array with the wanted keys. Then take only one loop for assigning and checking.

If all values are truthy, data contains the trimmed values, otherwise it is undefined .

var keys = ['category', 'decisive_min', 'decisive_max', 'interactive_min', 'interactive_max', 'stabilizing_min', 'stabilizing_max', 'cautious_min', 'cautious_max', 'aesthetic_min', 'aesthetic_max', 'economic_min', 'economic_max', 'individualistic_min', 'individualistic_max', 'political_min', 'political_max', 'altruist_min', 'altruist_max', 'regulatory_min', 'regulatory_max', 'theoretical_min', 'theoretical_max'],
    data = {};

data = keys.every(function (k) {
    return data[k] = this.refs[k].value.trim();
}, this) && data || undefined;

Answer 2

Using ES2015, you can do something like that :

Inside your component

const fields = getFields(this.refs);

if (checkFieldsNotEmpty(fields)) {
    const data = {category:this.refs.category.value.trim()};
    fields.forEach(field => {
      data[`${field.name}_min`] = field.valueMin;
      data[`${field.name}_max`] = field.valueMax;
    });
    // ...
}

Outside your component (can be static methods)

const fieldNames = [
  'decisive',
  'interactive',
  'stabilizing',
  // ...
];

const getFields = refs => fieldNames.map(name => ({
    name,
    valueMin: refs[`${fieldName}_min`].value.trim(),
    valueMax: refs[`${fieldName}_max`].value.trim()
}));

const checkFieldsNotEmpty = fields => {
  for (let field of fields) {
    if (field.valueMin === '' || field.valueMax === '') {
          return false  
    }
  }
  return true;
};

Answer 3

Try using

for (var property in this.refs) {
    if (this.refs.hasOwnProperty(property)) {
        // perform a null check
        if(this.refs[property]){
             //perform operaion
             data[property] = this.refs[property].trim();
        }
    }
}