CODEWITHSUNDEEP
javascriptconditional-operator
user13286
user13286

Reputation: 3075

Possible to build a string using shorthand conditionals like this?

I am trying to add some parameters to my URL based on dropdown selections, I want to keep the code as short and sweet as possible so I'm trying to build a string for the parameters that leaves out any variables that are blank so they do not get appended to the URL string. Below is what I've tried:

$(function() {
  var product = 'shirt',
      size = 'large',
      color = 'blue',
      custom = '';
      
  var urlParams = (product === '') ? '' : 'product=' + product + '&' + (size === '') ? '' : 'size=' + size + '&' + (color === '') ? '' : 'color=' + color + '&' + (custom === '') ? '' : 'custom=' + custom;
  
  console.log(urlParams);
  
  // Go to results page
  // location.href = 'results?' + urlParams;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The expected output of urlParams is:

product=shirt&size=large&color=blue

Unfortunately this returns an empty string. Is it possible to build the parameters like this? Or is there some better way to accomplish this?

Upvotes: 1

Views: 41

Answers (3)

user10616833
user10616833

Reputation: 

const params = {
    product: 'shirt',
    size: 'large',
    color: '',
    custom: null
}
const valid = p => k => typeof p [k] === 'string' && p [k].length > 0
let queryString = Object.keys (params).filter (valid (params)).map (k => `${k}=${params[k]}`).join ('&')

console.log (queryString)

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386560

You could check the value and take a logical AND for the formatted string.

var urlParams = (product && 'product=' + product + '&') +
                (size && 'size=' + size + '&') +
                (color && 'color=' + color + '&') +
                (custom && 'custom=' + custom);

Anmother approach would be to use an object, filter truthy values and build formatted string with a template string.

function getString(object) {
    return Object
        .entries(object)
        .filter(([, v]) => v)
        .map(([k, v]) => `${k}=${v}`)
        .join('&');
}

var product = 'foo', 
    size = '42',
    color = '',
    data = { product, size, color };
    
    
console.log(getString(data))

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Parantheses matter!

The problem is, you aren't looking into the older ones. The custom === "" gets truthy and then your whole condition is collapsed. Better way to do is:

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = ((product === '') ? '' : 'product=' + product) + '&' + ((size === '') ? '' : 'size=' + size) + '&' + ((color === '') ? '' : 'color=' + color) + '&' + ((custom === '') ? '' : 'custom=' + custom);

  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

Now you could see that there are &s. A better version will be:

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = ((product === '') ? '' : 'product=' + product) + '&' + ((size === '') ? '' : 'size=' + size) + '&' + ((color === '') ? '' : 'color=' + color) + '&' + ((custom === '') ? '' : 'custom=' + custom);
  urlParams = urlParams.replace(/^\&+|\&+$/g, '');
  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

The best would be using arrays and .join()s.

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = [
    ((product === '') ? '' : 'product=' + product),
    ((size === '') ? '' : 'size=' + size),
    ((color === '') ? '' : 'color=' + color),
    ((custom === '') ? '' : 'custom=' + custom)
  ];
  urlParams = urlParams.join("&").replace(/^\&+|\&+$/g, '');
  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

Upvotes: 1

Related Questions