Как в объекте new URLSearchParams поменять тип данных значения ключа?

Question

[Andy Koshman]

Всем привет, в задаче мне нужно отправить некий айдишник на backend с типом number, в моём случае typeof ID === 'string' По ходу дела, поскольку у меня get запрос, то я использую объект new URLSearchParams для работы в fetch. На выходе я получаю ID как string и backend за счет этого не может посчитать то что ему нужно. Есть ли возможность как то изменить тип данных значения в объекте? Или же есть какие то еще варианты.

const url = `${route("url")}?${obj}`;

  let ID = 3 //рандомный id 
  let obj = new URLSearchParams({
    "ID[]": ID,
  });
  for (const ID of obj.get(
      "ID[]"
    )) {
    console.log("ID: ", ID); 
    console.log("ID: ", typeof ID);//тут должен быть number
  }

Answer 1

[Сергей Соколов]

как представляете себе различие между строкой и числом в GET-параметрах URL?
https://example.com/api/method?NUM=123&STR=abc

Так-то метод URLSearchParameters.get() всегда возвращает строку, или null.

Это на бэке пусть чинят, что сломали )

Comments

[Andy Koshman]

Вот я примерно так себе это всё и представлял и тут на всякий случай спросил, мало ли за обходные способы реализации. По поводу бэка, может быть вопрос глупый но всё же, может ли бэк принять строку от меня и у себя уже преобразовать в нужный тип данных?

[Сергей Соколов]

Andy Koshman, может.

[Andy Koshman]

Сергей Соколов, Понял, спасибо еще раз.

[Andy Koshman]

Сергей Соколов, Хотел бы вам задать еще один вопрос. Я пообщался с бэком и мне было сказано что дело не в типизации, а в том что в массиве всегда один элемент, например на данный момент он получает такой массив ['1, 1'], а ему нужен массив такого вида['1', '1']. В общем при клике на счетчики я собираю айдишки и присылаю на бэк, вот моя примерная реализация как это работает в проекте, в предложении выше я условно кликнул 2 раза на первый счетчик и получил при клике ['1, 1']: https://jsfiddle.net/d504ecjs/4/. Искренне не могу понять как мне такое реализовать в данном контексте и возможно ли это вообще. На jquery работает прекрасно, но проект на vanilla и я бы не хотел мешать эти дела и разобраться уже наконец то в fetch. Буду благодарен любой помощи.

[Сергей Соколов]

Andy Koshman, бывают разные варианты передачи "массива" значений в URL:

// повтор имени
?id=1&id=2

// то же, с квадратными скобками
?arr[]=3&arr[]=4  // будет ?arr%5B%5D=3&arr%5B%5D=4

// перечисление через разделитель:
?id=5,6

URLSearchParams.toString() поступает как первые два варианта:

const usp = new URLSearchParams();
usp.append('id', 1);
usp.append('id', 2);
usp.append('arr[]', 3);
usp.append('arr[]', 4);
usp.toString()
// "id=1&id=2&arr%5B%5D=3&arr%5B%5D=4"

Когда хочется передать чуть более сложные данные чем ?a=A&b=B удобнее их передавать в теле запроса, не GET'ом, а POST или PUT запросом. Уточните у бэка, сумеет ли он принять JSON в теле POST-запроса?

[Сергей Соколов]

какой из трёх вариантов ожидает бэк?

[Andy Koshman]

Сергей Соколов, До бэка очень сложно достучаться. Как будет информация, я вам отпишусь.

[Andy Koshman]

Сергей Соколов, Всё же я пытаюсь сам понять чего он требует. Скорее всего второй вариант, проверил с помощью jquery правильный запрос и массив с данными выглядит вот так:
&PassTypeIDS%5B%5D=1&PassTypeIDS%5B%5D=1
То есть вариант с квадратными скобками. Вы говорите что toString() может мне помочь?

[Сергей Соколов]

Andy Koshman, нет, toString() фактически происходит у вас тут: const url = `${route("url")}?${obj}`;

[Сергей Соколов]

Andy Koshman, мельком посомтрел код — там у вас в data оказывается массив ID'шек. Достаточно его значения по одному добавить append'ом():

spoiler

const childBlock = document.querySelectorAll('.child-block');
// const elem = document.querySelectorAll('.elem');
// const amount = document.querySelectorAll('.amount');

document.querySelectorAll('.btn-all').forEach(n => {
  n.addEventListener('click', onGetDataClick);
});

let data;
const key = 'ID[]';
function onGetDataClick({ target }) {
  data = Array.from(target.closest('.child-block').querySelectorAll('.elem')).flatMap(n =>
    Array(+n.querySelector('input').value).fill(+n.dataset.id)
  );

  console.log(data);

  const usp = new URLSearchParams();
  data.forEach(id => usp.append(key, id));

  const url = `https://example.com/api/method?${usp.toString()}`;
  console.log('URL: %s', url);
}

// counter
const max = Math.max(2);
const min = Math.min(0);
childBlock.forEach(button => {
  button.addEventListener('click', e => {
    const isPlusBtnOne = e.target.classList.contains('btn__plus-one');
    const isMinusBtnOne = e.target.classList.contains('btn__minus-one');
    const isPlusBtnTwo = e.target.classList.contains('btn__plus-two');
    const isMinusBtnTwo = e.target.classList.contains('btn__minus-two');
    const counterBlock = e.target.closest('.elem');
    if (isPlusBtnOne || isMinusBtnOne || isPlusBtnTwo || isMinusBtnTwo) {
      const input = counterBlock.querySelector('.amount');
      if (isPlusBtnOne || isPlusBtnTwo) {
        input.value = Number(input.value) + 1;
        if (input.value >= max) {
          input.value = max;
        }
      }
      if (isMinusBtnOne || isMinusBtnTwo) {
        input.value = Number(input.value) - 1;
        if (input.value <= min) {
          input.value = min;
        }
      }
    }
  });
});

[Andy Koshman]

Сергей Соколов, Спасибо большое, это абсолютно то что мне нужно было. Я немного покрутил и еще один небольшой вопрос появился, как правильно передать в url объект, который мы сформировали временем ранее таким образом, чтобы url при таком массиве [1, 1] имел такой вид:
id[]=1&id[]=1
В моем случае это выглядит вот так:
id%5B%5D=1%2C1&id%5B%5D=1&id%5B%5D=1
Насколько я понял, оно добавляет сюда данные такого вида: [1] [1] [1, 1], а мне нужно вот так [1], [1]. Скорее всего добавляется data из объекта и еще data из forEach.
Извините за возможно тривиальные вопросы, но я стараюсь) https://jsfiddle.net/d504ecjs/6/

[Сергей Соколов]

Andy Koshman, URLSearchParams не умеет сериализовывать сложные значения, поэтому зря вы там вкрячили снова

let object = new URLSearchParams({
  'ID[]': data,
})

Только вариант с добавления ключ-значение по одному. Как я предложил выше. forEach(... append() ...)

[Andy Koshman]

Сергей Соколов, Спасибо, думаю что вы мне рассказали всё что нужно для того чтобы я смог добить данную задачу. Будем пробовать)

[Andy Koshman]

Сергей Соколов, У меня получилось и всё прекрасно работает. Еще раз спасибо за уделенное время, было приятно пообщаться)