17

Преобразование данных формы в объект JavaScript с помощью jQuery

17

Как мне преобразовать все элементы моей формы в объект JavaScript?

Я хотел бы иметь способ автоматически создавать объект JavaScript из моей формы, не проходя через каждый элемент в цикле. Мне не нужна строка, возвращаемая методом \(('#formid').serialize();</code>, и я также не хочу карту, возвращаемую методом <code>\)('#formid').serializeArray();.

4 ответ(ов)

3

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

Вот исправленный вариант вашего кода:

var data = {};
$(".form-selector").serializeArray().forEach(function(x) {
    data[x.name] = x.value;
});

Таким образом, код станет более понятным и семантически правильным. forEach лучше подходит для перебора элементов без создания нового массива.

0

Все эти ответы, которые я видел, казались мне чрезмерными. Есть что-то ценное в простоте. Если у всех ваших элементов формы установлен атрибут 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?)
});

Этот подход позволяет легко собрать данные формы в объект, который затем можно использовать по вашему усмотрению.

0

Вам нужно создать функцию, которая будет корректно обрабатывать поля формы, где имена полей указаны в виде массива, например 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>

Описание:

  1. Проверка имени полей: Функция разбивает имя каждого поля на составные части на основе синтаксиса, используемого для массивов и вложенных объектов.

  2. Создание структуры объекта: Если имя поля состоит из нескольких частей, мы создаем вложенные объекты или массивы. Если имя поля заканчивается на [], то добавляем значение в массив, иначе присваиваем значение соответствующему ключу.

  3. Использование функции: При изменении значений в полях формы функция обновляет объект 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.

0

На самом деле, нет способа сделать это, не проверяя каждый из элементов. Что вы действительно хотите узнать, так это "написал ли кто-то другой метод, который преобразует форму в объект 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, его значение будет добавлено к существующему. В противном случае значение будет присвоено новому ключу в объекте.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь