Как получить данные формы в виде массива объектов?

Question

[Alex_87]

Сейчас код выводит значения с input в таком виде:

{"lastTo":"11111","last":"9999","name":"","type":"Report Type","url":"","exurl":"","data":"","ipv4":"","country_code":"","group_code":"","online":"","Web":"on","Has":"on"}

Это один объект со множеством полей. А нужен вот такой вид:

{'lastTo':'json2html'} , {'last':'is'} и так далее...

Здесь каждое значение обернуто в отдельный объект.

https://codepen.io/Alexei_87/pen/ZEEPEaz

Answer 1

[0xD34F]

JSON.stringify([...this.querySelectorAll('[name]')].map(n => ({
  [n.name]: n.type === 'checkbox' ? n.checked : n.value,
})))

Comments

[Alex_87]

с вашим кодом выходит следующая ошибка:
Uncaught TypeError: this.querySelectorAll is not a function or its return value is not iterable

[Alex_87]

Может, я что-то не так записал?

return JSON.stringify([...this.querySelectorAll('[name]')].map(n => ({
  [n.name]: n.type === 'checkbox' ? n.checked : n.value,
})))

[0xD34F]

Alex_87, да, не так.

[Alex_87]

0xD34F, а что именно не так?

[0xD34F]

Alex_87, подумайте, вроде бы всё очевидно. Или код из вопроса написан не вами, вы его откуда-то украли, и не стали в нём разбираться?

[Alex_87]

0xD34F, А почему сразу "украли"?

[0xD34F]

Alex_87, а, вижу, вы уже разобрались со своей проблемой. Рад был помочь.

[Alex_87]

0xD34F, нет, ещё не разобрался. Мне ещё ниже прислали код, и я его проверял. А с вашим, мне казалось, что ошибка в том, что return не может вернуть такое выражение, а потому, я сохранил его в переменную и попытался вернуть её. Но вышла та же ошибка.

[0xD34F]

Никуда ничего возвращать не надо. Код из ответа - всё, что нужно. Засовывайте результат его работы в output:

output.innerHTML = JSON.stringify([...this.querySelectorAll('[name]')].map(n => ({
  [n.name]: n.type === 'checkbox' ? n.checked : n.value,
})));

Answer 2

[eRKa]

const source = { a:1, b:2, c:3 }
const result = [];
for(let key in source){
   const ob = {};
   ob[key]=source[key];
   result.push(ob);
}

Comments

[Alex_87]

ваш код(я показываю только часть своего кода)

var json = toJSONString( this );
            const result = [];
                for(let key in json){
                   const ob = {};
                   ob[key]=json[key];
                   result.push(ob);
                }

            output.innerHTML = result;

показывает следующий результат:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object], и так очень и очень долго)

[eRKa]

Alex_87, Вам нужно немного матчасть поучить. Json - это строковое представление объекта, т.е. в json у Вас строка, а не объект. Сделайте так тогда
for(let key in this)
И если Вы хотите вывести результат как html, то вот тогда объект лучше привести к json
output.innerHTML = toJSONString( result );

[eRKa]

Все-таки заглянул в песочницу. Хоть код и бредовый, но все равно думаю, что его писали не Вы, матчасть не знаете, поэтому толку от подсказок нет.
Ловите

[Alex_87]

eRKa, Спасибо! Он работает!!! Только я не понимаю вот этой вашей строчки:
output.innerHTML += JSON.stringify(result);
result уже обрабатывать методом json не обязательно. Код и так работает
output.innerHTML = result;

[eRKa]

Alex_87, если работает, отмечают как решение.
result - это объект, прежде, чем вставить его в разметку, его надо преобразовать к строковому виду. А так как json имеет строковый тип, поэтому и выполняется JSON.stringify(result).

[Alex_87]

eRKa, Я вас хочу попросить зайти в другой мой вопрос.
Ошибка при использование ${lastTo}?
Этот код, который здесь обсуждался, сейчас прекрасно работает. Но это в случае, когда webpack отсутствует. Дело в том, что я использую в коде шаблонизатор:

<% var data = {
			title: "Заголовок | Проект",
			author: "Harrix",
			
		  }; %>
	<%= _.template(require('./../includes/header.html').default)(data) %>


	<%= _.template(require('./../includes/aside.html').default)(data) %>
	<%= _.template(require('./../includes/reports.html').default)(data) %>

Он то и не пропускает такую запись: ${lastTo}