Estoy adaptando un proyecto de código abierto con algunos campos de entrada adicionales. Lo que necesito poder hacer es obtener pares de campos de entrada como pares clave/valor y enviarlos a una matriz.
Ignorando la estética, la esencia general es:
<input placeholder="Key1"> <input placeholder="Value1"> <!-- Pair 1 --> <input placeholder="Key2"> <input placeholder="Value2"> <!-- Pair 2 --> <input placeholder="Key3"> <input placeholder="Value3"> <!-- Pair 3 -->¿Cómo puedo configurar los campos de entrada para que puedan ser
# Example <button>Add New Key/Value</button>Luego espero poder analizarlo en una serie de mapas como este:
let values = [ {key: "Key1", value: "Value1"}, ] En este momento tengo un solo par estático con el conjunto de id que consulto
var key1 = trim( $('#key1').val() ); var value1 = trim( $('#value1').val() );Pero esto no es escalable ni se permite ser dinámico.
Nota: no puedo implementar un marco como Vue o React, ya que se trata de una base de código existente.
Puede seleccionar todas las entradas y luego usar Array.reduce .
En la función de reducción, puede verificar si el índice es par o no. Si es así, inserte en la matriz un nuevo objeto con su propiedad key establecida en la propiedad de placeholder de posición de la entrada. De lo contrario, establezca la propiedad de value del último elemento de la matriz en la propiedad de placeholder de posición de la entrada.
const inputs = document.querySelectorAll('#form1 input') const values = [...inputs].reduce((a,b,i) => { if(i % 2 == 0){ a.push({key:b.placeholder}) }else{ a[a.length - 1].value = b.placeholder; } return a; }, []) console.log(values) <form id="form1"> <input placeholder="Key1"> <input placeholder="Value1"> <!-- Pair 1 --> <input placeholder="Key2"> <input placeholder="Value2"> <!-- Pair 2 --> <input placeholder="Key3"> <input placeholder="Value3"> <!-- Pair 3 --> </form>Simplemente envuelva cada par en un elemento contenedor y mapee esos contenedores que devuelven un objeto para cada contenedor
const containers = document.querySelectorAll('.input-container') const arr = [...containers].map(el => { const inputs = el.querySelectorAll('input'); return {key: inputs[0].placeholder , value: inputs[1].placeholder} }) console.log(arr) <div class="input-container"> <input placeholder="Key1"> <input placeholder="Value1"> <!-- Pair 1 --> </div> <div class="input-container"> <input placeholder="Key2"> <input placeholder="Value2"> <!-- Pair 2 --> </div> <div class="input-container"> <input placeholder="Key3"> <input placeholder="Value3"> <!-- Pair 3 --> </div>