Преобразование данных формы в объект JavaScript с помощью jQuery
Как мне преобразовать все элементы моей формы в объект JavaScript?
Я хотел бы иметь способ автоматически создавать объект JavaScript из моей формы, не проходя через каждый элемент в цикле. Мне не нужна строка, возвращаемая методом \(('#formid').serialize();</code>, и я также не хочу карту, возвращаемую методом <code>\)('#formid').serializeArray();
.
4 ответ(ов)
Проблема с вашим кодом заключается в том, что вы используете метод map
для преобразования массива, но не сохраняете результат. В данном случае, поскольку вы просто хотите создать объект из массива, вам не нужен map
, так как он создаёт новый массив, который вы не используете. Вместо этого, вы можете использовать метод forEach
, который более подходит для выполнения побочных эффектов, таких как модификация объекта.
Вот исправленный вариант вашего кода:
var data = {};
$(".form-selector").serializeArray().forEach(function(x) {
data[x.name] = x.value;
});
Таким образом, код станет более понятным и семантически правильным. forEach
лучше подходит для перебора элементов без создания нового массива.
Все эти ответы, которые я видел, казались мне чрезмерными. Есть что-то ценное в простоте. Если у всех ваших элементов формы установлен атрибут name, этот код должен работать отлично.
$('form.myform').submit(function () {
var $this = $(this),
viewArr = $this.serializeArray(),
view = {};
for (var i in viewArr) {
view[viewArr[i].name] = viewArr[i].value;
}
// Здесь можно работать с объектом view (например, JSON.stringify?)
});
Этот подход позволяет легко собрать данные формы в объект, который затем можно использовать по вашему усмотрению.
Вам нужно создать функцию, которая будет корректно обрабатывать поля формы, где имена полей указаны в виде массива, например name[key]
, и формировать объект JSON из значений этих полей. Вот пример функции getForm2obj
, которая выполняет эту задачу:
$.fn.getForm2obj = function() {
var _ = {};
$.map(this.serializeArray(), function(n) {
const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
if (keys.length > 1) {
let tmp = _;
pop = keys.pop();
for (let i = 0; i < keys.length, j = keys[i]; i++) {
tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
}
if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
else tmp[pop] = n.value;
} else _[keys.pop()] = n.value;
});
return _;
}
Пример использования:
Вы можете протестировать эту функцию на HTML-форме:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
<input name="name" value="value">
<input type="checkbox" name="name1[]" value="1" checked="checked">1
<input type="checkbox" name="name1[]" value="2">2
<input type="checkbox" name="name1[]" value="3">3<br>
<input type="radio" name="gender" value="male" checked="checked">male
<input type="radio" name="gender" value="female"> female
<input name="name2[key1]" value="value1">
<input name="one[another][another_one]" value="value4">
<input name="name3[1][name]" value="value4">
<input name="name3[2][name]" value="value4">
</form>
<script>
$(document).ready(function() {
console.log($('form').getForm2obj());
$('form input').change(function() {
console.clear();
console.log($('form').getForm2obj());
});
});
</script>
Описание:
Проверка имени полей: Функция разбивает имя каждого поля на составные части на основе синтаксиса, используемого для массивов и вложенных объектов.
Создание структуры объекта: Если имя поля состоит из нескольких частей, мы создаем вложенные объекты или массивы. Если имя поля заканчивается на
[]
, то добавляем значение в массив, иначе присваиваем значение соответствующему ключу.Использование функции: При изменении значений в полях формы функция обновляет объект JSON, который выводится в консоль.
Таким образом, результат, который вы получите, будет соответствовать желаемой структуре JSON:
{
"name": "value",
"name1": ["1", "2", "3"],
"gender": "male",
"name2": { "key1": "value1" },
"one": { "another": { "another_one": "value4" } },
"name3": {
"1": { "name": "value4" },
"2": { "name": "value4" }
},
"": ["value5"]
}
Эта функция поможет вам корректно обрабатывать данные из формы и преобразовывать их в объект JSON.
На самом деле, нет способа сделать это, не проверяя каждый из элементов. Что вы действительно хотите узнать, так это "написал ли кто-то другой метод, который преобразует форму в объект JSON?" Что-то вроде следующего должно сработать — обратите внимание, что это даст вам только те элементы формы, которые будут возвращены через POST (они должны иметь атрибут name). Этот код не протестирован.
function formToJSON(selector) {
var form = {};
$(selector).find(':input[name]:enabled').each(function() {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
} else {
form[name] = self.val();
}
});
return form;
}
Этот метод использует jQuery для перебора всех элементов формы с заданным селектором, проверяя их на наличие имени и возможности быть включенными. Если у элемента уже есть такое имя в объекте form
, его значение будет добавлено к существующему. В противном случае значение будет присвоено новому ключу в объекте.
Запрос Ajax возвращает 200 OK, но вместо успеха срабатывает событие ошибки
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
Как определить нажатие клавиши Esc?
Удалить ВСЕ пробелы из текста