WedX - журнал о программировании и компьютерных науках

Есть ли лучший/более простой способ сериализации html-формы в объект

Я отправляю форму с входами radio и checkbox (поэтому несколько элементов имеют одно и то же имя), и вот что я придумал.

Есть ли более быстрый/простой способ с помощью чистого JavaScript превратить HTML form в object, чтобы я мог использовать JSON.stringify?

Никаких фреймворков и библиотек.

function serialize_form(felement) {
    const names = new Set();
    let values = {}
    for(let i = 0; i < felement.elements.length; i++) {
        if(felement[i].name && (felement.name != undefined || felement.name != "")){
            names.add(felement[i].name)
        }
    }

    for(let name of names) {
        values[name] = felement[name].value;
    }

   console.log(names, values);

   return values;
}
javascript html
14.12.2020

Ответы:


1

Вы можете выполнить несколько простых преобразований, используя FormData.keys() и < a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll" rel="nofollow noreferrer">FormData.getAll()

document.querySelector("form").addEventListener("submit", e => {
  e.preventDefault()
  
  const fd = new FormData(e.target)
  const obj = Object.fromEntries(Array.from(fd.keys(), key => {
    const val = fd.getAll(key)
    return [ key, val.length > 1 ? val : val.pop() ]
  }))
  
  document.querySelector("pre").innerHTML = JSON.stringify(obj, null, 2)
})
<form>
  <p><input type="text" name="text" value="text value"></p>
  <p>
    Checkboxes:
    <label>Foo <input type="checkbox" value="foo" name="checkbox"></label>
    <label>Bar <input type="checkbox" value="bar" name="checkbox"></label>
    <label>Baz <input type="checkbox" value="baz" name="checkbox"></label>
  </p>
  <p>
    Select:
    <select name="select" multiple>
      <option>foo</option>
      <option>bar</option>
      <option>baz</option>
    </select>
  </p>
  <p><button>Serialize</button></p>
</form>
<pre></pre>

Обратите внимание, что это изменяет значения между массивами и строками в зависимости от количества сделанных выборок. Если вам нужен более согласованный API, просто используйте массивы для каждого значения, даже если есть только один выбор.

const obj = Object.fromEntries(Array.from(fd.keys(), key => 
  [ key, fd.getAll(key) ]))
14.12.2020

2

Благодаря тому, что @brad указал на FormData, я смог сократить моя функция serialize_form не работает, и это привело к этому ответу https://stackoverflow.com/a/46774073/9908.

function serialize_form(felement) {
            const fd = new FormData(felement);
            let object = {};


            fd.forEach((value, key) => {
            // Reflect.has in favor of: object.hasOwnProperty(key)
                if(!Reflect.has(object, key)){
                    object[key] = value;
                    return;
                }
                if(!Array.isArray(object[key])){
                    object[key] = [object[key]];
                }
                object[key].push(value);
            });
            console.log(object);
            return object;
        }
14.12.2020
  • Как насчет Object.fromEntries(new FormData(felement)) 14.12.2020
  • @Phil Я только что видел этот ответ на вопрос формы jQuery, и сейчас я проверяю, может ли он обрабатывать выборки с несколькими значениями. Было бы хорошо, если бы это был только один лайнер. 14.12.2020
  • Ах да, он не работает с множественным выбором или повторяющимися именами. 14.12.2020
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]