Check API call query parameters for !== null values

user_7014356 0
Viewed 985

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?

angular typescript api javascript
6 Answers

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',
  ...
}
user_86101270

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
    });
}
user_102892650

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

user_130933100

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
         });

     }     
   }
user_80292110

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
    });
}
user_13908940

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);

user_4760
Related