Как из строки сделать массив объектов?

Question

[aliaksandr-go]

Есть строка, например:

room_number[]=2&room_number[]=3&room_number[]=4&price_min=111&price_max=999&area[]=Ленинский район

Надо получить:

[
  { name: 'room_number_2', value: 2 },
  { name: 'room_number_3', value: 3 },
  { name: 'room_number_4', value: 4 },
  { name: 'price_min', value: 111 },
  { name: 'price_max', value: 999 },
  { name: 'area',  value: 'Ленинский район' },
]

Comments

[Василий Банников]

Не нужно тут регулярки использовать. Используй готовый парсер query-строк.
Ну или можно сделать свой: тут просто делаешь split по & и делаешь цикл.
Внутри цикла делаешь split по = и проверяешь ещё наличие [] в конце имени.
Ну и потом складываешь это всё в словарь или массив.

[Aetae]

Например так:

var search = 'room_number[]=2&room_number[]=3&room_number[]=4&price_min=111&price_max=999&area[]=Ленинский район';

var list = Array.from(new URLSearchParams(search), ([name, value]) => {
  const isNumber = Number(value).toString() === value;

  if (name.endsWith('[]')) {
    name = name.replace('[]', isNumber ? `_${value}` : '');
  }

  if (isNumber) {
    value = Number(value);
  }

  return { name, value }
});

console.log(list);

Но это колхоз. Почему в случае с цифрами вместо массива подставляется значение, а в случае строки - отбрасывается факт, что там подразумевается массив? Какие-то правила от балды.

Нормально чтоб работать - используй URLSearchParams напрямую и не городи огород.
А если хочется чтоб красиво - используй библиотеки с поддержкой типизированных схем, чтоб ты заранее указывал схему как что разбирать: где массив строк, где одиночное число и т.д. и всегда был уверен в результате.

Answer 1

[Aleksey Solovyev]

const queryString =
  "room_number[]=2&room_number[]=3&room_number[]=4&price_min=111&price_max=999&area[]=Ленинский район"

function convertQueryString(query) {
  const result = []
  const pairs = query.split("&")

  pairs.forEach((pair) => {
    const [name, value] = pair.split("=")
    const cleanName = name.replace(/\[\]/g, "")

    result.push({
      name: cleanName,
      value: decodeURIComponent(value),
    })
  })

  return result
}

const output = convertQueryString(queryString)
console.log(output)

const queryString = "room_number[]=2&room_number[]=3&room_number[]=4&price_min=111&price_max=999&area[]=Ленинский район";

const output = queryString.split('&').map(pair => {
  const [name, value] = pair.split('=')
  return {
    name: name.replace(/\[\]/g, ''),
    value: decodeURIComponent(value),
  }
})

console.log(output)

Answer 2

[Василий Банников]

Попробуй такое:

function parseQueryString(data) {
  const result = {};
  const pairs = data.split('&').map(x=>x.split('='));
  for(const [name, value] of pairs) {
      const clean_name = name.endsWith('[]') ? name.substr(0, name.length - 2) : name;
      if(!result.hasOwnProperty(clean_name)) {
          result[clean_name] = [];
      }
      result[clean_name].push(value);
  }
  return result;
}

На твоём примере выдаёт такое:

{
  area: ["Ленинский район"],
  price_max: ["999"],
  price_min: ["111"],
  room_number: ["2", "3", "4"]
}

Но в примере выше не проверяются всякие негативные сценарии, так что лучше используй что-то готовое.

Answer 3

[0xD34F]

Если отвечать ровно на то, что спрошено, тогда (уродливому результату - уродливый код)

const arr = str.split('&').map(n => (
  n = n.split('='),
  n[1] = isNaN(n[1]) ? n[1] : Number(n[1]),
  ({
    name: n[0].endsWith('[]')
      ? `${n[0].slice(0, -2)}${typeof n[1] === 'number' ? `_${n[1]}` : ''}`
      : n[0],
    value: n[1],
  })
));

Если же обойтись без лютого бреда с подклеиванием числовых значений к имени, то

const arr = Array.from(
  new URLSearchParams(str),
  ([ k, v ]) => ({
    name: k.replace(/\[\]$/, ''),
    value: Number.isNaN(+v) ? v : +v,
  })
);

или (раз уж в тегах присутствуют регулярные выражения, то вот ещё немного хренового кода)

const arr = [...str.matchAll(/([^&]+)=([^&]*)/g)].map(([ , k, v ]) => ({
  name: k.match(/(.*?)(\[\])?$/)[1],
  value: /^-?\d+(\.\d+)?$/.test(v) ? parseFloat(v) : v,
}));