I would like to submit only queryParams parameters which have values !== null, but I am not sure how to write it down. So the submit function looks like this:

onSubmit() {        
    const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

    this.callAPI({
        queryParams: queryParams
    });
}

I am not sure where to do that check... I realize that something like this is wrong:

this.callAPI({
    queryParams: queryParams !== null
});

What would be a correct way to check this?

I would like to submit only queryParams parameters which have values !== null, but I am not sure how to write it down. So the submit function looks like this:

onSubmit() {        
    const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

    this.callAPI({
        queryParams: queryParams
    });
}

I am not sure where to do that check... I realize that something like this is wrong:

this.callAPI({
    queryParams: queryParams !== null
});

What would be a correct way to check this?

• javascript
• angular
• typescript
• api

6 Answers 6

I have this problem so I wrote my own function to do that.

const setParams = obj => {
    const params = new URLSearchParams();
    for (let [key, value] of Object.entries(obj)) {
        if (value) { // check here for null or whatever you want
            params.append(key, value);
        }
    }
    return params;
};

and pass parameter as object like this:

{
  name: 'lablablab',
  date: 'someDate',
  ...
}

queryParams will never be null since you're concatenating it as a string.

Instead, if you need to make sure name, startDate and endDate have values. You need to check them instead:

onSubmit() {
    if(!this.name || !this.startDate || !this.endDate){
        return;
    }

    const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

    this.callAPI({
        queryParams
    });
}

You need to do this in that way:

const queryParams = `${this.name !== null ? '&name=' + this.name : ''}${this. startDate !== null ? '& date_from =' + this. startDate : ''}${this. endDate !== null ? '& date_to =' + this. endDate : ''}`; 

this.callAPI({
        queryParams: queryParams
    });

Here I use template string which is perfect for appending variables to strings. Inside you can see ternary operator which is shorten if..else statement and could be used inline

queryParams cannot be null because you are adding '&name=','&date_from=' and '&date_to' even if this.name ,this.startdate and this.enddate are null or undefined.

So try like this

onSubmit() {  
     if(this.name && this.startDate && this.endDate)
     {
        const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

        this.callAPI({
           queryParams: queryParams
         });

     }     
   }

Simple way

onSubmit() {      

    const { name, startDate, endDate} = this;

    let queryparams = ``;

    if(name) {
        queryparams.concat(`&name=${name}`)
    }
    if(startDate) {
        queryparams.concat(`&date_from=${startDate}`)
    }
    if(endDate) {
        queryparams.concat(`&end_from=${endDate}`)
    }

    this.callAPI({
        queryParams
    });
}

Build an object, filter out empty values, and dynamically concatenate the rest into a query string:

const params = {
    name: this.name, 
    date_from: this.startDate, 
    date_to: this.endDate
};

const queryParams = Object.keys(params)
    .filter(k => params[k] !== null)
    .map(k => `${k}=${encodeURIComponent(params[k])}`)
    .join('&');

this.callAPI({ queryParams });

Demo:

const params = {
  foo: null,
  bar: 'hello world',
  baz: 42
};

const queryParams = Object.keys(params)
  .filter(k => params[k] !== null)
  .map(k => `${k}=${encodeURIComponent(params[k])}`)
  .join('&');
  
console.log(queryParams);