Как преобразовать объект js в строку get запроса?

Question

[Александр Маджугин]

Т.е. на входе имею

var queryObject = {
		grouop1: {
			VAR1: 'val1',
			VAR2: 'val2',
			subgroup1: {
				VAR3: 'val3',
				VAR4: 'val4',
			}
		},
		grouop2: {
			VAR5: 'val5',
			VAR6: 'val6'
		},
		VAR7: 'val7'
	};

на выходе хочу получить:

grouop1[VAR1]=val1&grouop1[VAR2]=val2&grouop1[subgroup1][VAR3]=val3&grouop1[subgroup1][VAR4]=val4&grouop2[VAR5]=val5&grouop2[VAR6]=val6&VAR7=val7

Как добиться?

UPD:
Этот запрос нужен не для отправки на сервер, на сервер и так все уже улетает как надо - запрос нужен чтобы добавить его в URL браузера, чтобы дать возможность пользователю скопировать URL состояния и для того чтобы, он мог перемещаться по истории.

https://habr.com/ru/post/232073/ - эту статью видел. Во-первых там способ сам по себе плохо реализован, во-вторых он неработоспособный - работает только с "плоскими" объектами. Хотя сейчас я именно его и использую "кодируя" объект в "плоский", т.е. у меня сейчас gropu1[VAR1] кодируется как group1:VAR1 и это я уже разбираю на бэке.

Answer 1

[ThunderCat]

можно просто сделать урленкод и передать весь жсон как строку, будет гораздо проще.

Comments

[Александр Маджугин]

Если бы мне для "передать", я бы так и сделал или отправил бы как post.
Да вообще говоря я так и делаю на самом дел, но мне одновременно нужно сунуть это же в history.pushState, чтобы изменить строку url и у пользователя была возможность скопировать url.

[ThunderCat]

Александр Маджугин, так и в чем проблема? Гет переменные же разные будут, копируйте на здоровье.

[ThunderCat]

Александр Маджугин, получится что то типа

www.some.tld?params=%7B%0A%20%20%20%20grouop1%3A%20%7B%0A%20%20%20%20%20%20VAR1%3A%20%27val1%27%2C%0A%20%20%20%20%20%20VAR2%3A%20%27val2%27%2C%0A%20%20%20%20%20%20subgroup1%3A%20%7B%0A%20%20%20%20%20%20%20%20VAR3%3A%20%27val3%27%2C%0A%20%20%20%20%20%20%20%20VAR4%3A%20%27val4%27%2C%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20grouop2%3A%20%7B%0A%20%20%20%20%20%20VAR5%3A%20%27val5%27%2C%0A%20%20%20%20%20%20VAR6%3A%20%27val6%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20VAR7%3A%20%27val7%27%0A%20%20%7D

[Александр Маджугин]

ThunderCat, да - я сначала не понял что вы предлагает закодировать объект в строку и сунуть его в url...
У меня вчера брат предложил для перемотки не перематывающегося видео в проге, захвататить экран мобильника в видео, а потом его перематывать.
Но в принципе это решение - да.

[ThunderCat]

Александр Маджугин, это достаточно распространенный метод, ничего фантастического, так работают большинство апи крупных сервисов, например фейсбук апи. Так что это не "в принципе решение", а вполне повседневная практика.

[Александр Маджугин]

ThunderCat, да я и сам так делал - я сейчас вспомнил. И даже в base64 кодировал и пихал в get.

Answer 2

[0xD34F]

const getQueryArray = (obj, path = [], result = []) =>
  Object.entries(obj).reduce((acc, [ k, v ]) => {
    path.push(k);

    if (v instanceof Object) {
      getQueryArray(v, path, acc);
    } else {
      acc.push(`${path.map((n, i) => i ? `[${n}]` : n).join('')}=${v}`);
    }

    path.pop();

    return acc;
  }, result);

const getQueryString = obj => getQueryArray(obj).join('&');

или

const getQueryString = (obj, path = '') =>
  Object.entries(obj).reduce((acc, [ k, v ]) => (
    path && (k = `${path}[${k}]`),
    acc + (acc && '&') + (v instanceof Object
      ? getQueryString(v, k)
      : `${k}=${v}`
    )
  ), '');

Comments

[Александр Маджугин]

Стрелки нельзя - IE11 :'(
Но идея понятно - попробую переписать.