Soy consciente (de esto ) que puedo convertir explícitamente un valor en un número entero antes de pasarlo a JSON.stringify . Pero este enfoque no es útil cuando desea serializar los datos de un formulario. Tengo un código genérico:
let myform='#my_form_id`; $(myform).submit(function(event) { event.preventDefault(); const formData = new FormData($(myform)[0]); const json = JSON.stringify(Object.fromEntries(formData)); ws.send(json); // send over websocket });Y realmente no quiero convertir manualmente cada campo al tipo apropiado antes de la serialización. Va en contra de todas las reglas de un código "bien escrito".
Entonces, ¿cómo puedo serializar los campos de formulario en JSON manteniendo sus tipos de datos nativos?
Puede mapear las entradas y usar un caso de cambio para elegir qué datos y tipo se devuelven.
$('form').on('submit', function(e) { e.preventDefault(); let json = JSON.stringify($(this).find('input').get().map(function(input){ switch (input.type) { case 'checkbox': case 'radio': return input.checked; break; case 'number': case 'range': return +(input.value || 0); break; default: return input.value || '' } })); $('.json').html(json); }); <form> <div> <input> <input type="number"> <input type="checkbox"> <input type="radio"> <input type="color"> <input type="date"> <input type="range"> </div> <div> <input> <input type="number"> <input type="checkbox"> <input type="radio"> <input type="color"> <input type="date"> <input type="range"> </div> <button action="submit">SERIALIZE</button> </form> <p class="json"></p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>