0
275
Views¿Cómo se crea un registro, basado en datos de clave y valor proporcionados de forma personalizada?
Todavía soy un principiante en JavaScript y necesito crear un objeto basado en lo que el usuario escribe en los campos de entrada.
Aquí están los campos de entrada en mi formulario:
Después de que el usuario ingresa los valores para la columna y el valor, así es como se reciben los datos:
[ [{ label: "Column", value: "column1", name: "01", }, { label: "Value", value: "value1", name: "02", }, ], [{ label: "Column", value: "column2", name: "10", }, { label: "Value", value: "value2", name: "11", }, ], ];Pero no es así como se puede guardar para enviar la base de datos, la forma en que necesito enviarla es así:
{ // other data "column_names": { "column1": "value1", "column2": "value2" } }¿Podría decirme cómo puedo crear un objeto basado en lo que escribe el usuario? ¿Pero en la estructura que mostré en el segundo fragmento de código?
2 answers
Answer question0
La estructura de datos proporcionada por el OP se puede ver como una matriz de entradas de objetos donde cada entrada contiene una tupla de metadatos relacionados con la clave y el valor.
Por lo tanto, un enfoque sencillo reduce los datos proporcionados al registro deseado.
const receivedData = [ [{ label: "Column", value: "column1", name: "01", }, { label: "Value", value: "value1", name: "02", }], [{ label: "Column", value: "column2", name: "10", }, { label: "Value", value: "value2", name: "11", }], ]; const recordData = { // other data "column_names": receivedData .reduce((data, [ keyData, valueData ]) => { const key = keyData.value; const { value } = valueData; return Object.assign(data, { [key]: value }); }, {}) }; console.log({ recordData }); .as-console-wrapper { min-height: 100%!important; top: 0; }0
su resultado esperado es el diseño de objetos basado en el que puede agrupar el valor por sus nombres, lo cual es un poco más largo, pero si desea mejorar el diseño de objetos para hacer la misma tarea, tengo un código sugerido, intente esto
use el atributo de data en los campos de entrada con su nombre y luego obtenga todos los valores en un objeto con sus nombres clave correspondientes, vea un ejemplo a continuación
function getData(root){ const Els = root.querySelectorAll("[data]"),newOb = {} Els.forEach(each=>{ let key = each.getAttribute("data"), val = each.value newOb[key] = val }) return newOb } const main = document.querySelector(".root") main.oninput = function(){console.log(getData(main))} <div class="root"> <input class="border" data="col1" type="text"> <input class="border" data="col2" type="text"> <input class="border" data="col3" type="text"> <input class="border" data="col4" type="text"> </div>