Проверьте параметры запроса вызова API для значений! == NULL

Question

Я хотел бы предоставить только параметры queryParams, которые имеют значения! == null, но я не уверен, как их записать. Таким образом, функция отправки выглядит следующим образом:

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

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

Я не уверен, где сделать эту проверку ... Я понимаю, что что-то подобное не так:

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

Что бы правильный способ проверить это?

Answer 1

У меня есть эта проблема, поэтому я написал свою собственную функцию для этого.

    const setParams = obj => {
      const params = new URLSearchParams();
      for (let [key, value] of Object.entries(obj)) {
        if (value) {
          params.append(key, value);
        }
      }
      return params;
    };

Answer 2

Простой способ

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

Answer 3

Создание объекта, фильтрация пустых значений и динамическое объединение остальных в строку запроса:

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

Демонстрация:

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

Answer 4

queryParams не может быть нулевым, потому что вы добавляете '& name =', '& date_from =' и '& date_to', даже если this.name, this.startdate и this.enddate равны нулю или не определены.

Так что попробуйте как это

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

     }     
   }

Answer 5

Вы должны сделать это следующим образом:

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

Здесь я использую шаблонную строку, которая идеально подходит для добавления переменных в строки. Внутри вы можете увидеть троичный оператор, который сокращен в if..else и может быть использован inline

Answer 6

queryParams никогда не будет null, поскольку вы объединяете его в виде строки.

Вместо этого, если вам необходимо убедиться, что name, startDate и endDate имеют значения. Вы должны проверить их вместо:

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