Estoy tratando de generar un objeto JSON con un método vue y usando campos de datos de entrada vue para construir parte del objeto JSON. Mis archivos de entrada aceptan una clave y un valor y tengo dos valores predeterminados 'zona' y 'tope'. Mi objetivo es que el objeto JSON sea como:
{ "zone":{ "capping":{ "duration": 300 } } }
Pero en cambio obtengo un objeto JSON como este:
{ "zone":{ "capping":{ "values":[ { "key":"duration", "value":"300" } ] } } }
Este es mi método vue:
generateJson() { const values = this.inputs const loopedObj = values.forEach((item) => { const val = { ...item } return val }) console.log(values) const jsonValues = { zone: { capping: { values } } } console.log(JSON.stringify(jsonValues)) }
Este es el código Vue para los campos de entrada:
<div> <p>3- Add Data</p> <button @click="showInput">+</button> <div v-for="(input, k) in inputs" :key="k"> <input v-model="input.key" type="text" @change="getKey($event)" /> <input v-model="input.value" type="text" @change="getValue($event)" /> </div>
¿Algún consejo? Muchas gracias.
Mirando tu plantilla:
<input v-model="input.key" type="text" @change="getKey($event)" /> <input v-model="input.value" type="text" @change="getValue($event)" />
parece que su input
es un objeto que tiene key
de propiedades y value
:
inputs: [ { key: "", value: "" } ]
Cuando hiciste esto:
const values = this.inputs const loopedObj = values.forEach((item) => { const val = { ...item } return val })
Los problemas son:
forEach
que simplemente recorre la matriz. no devolverá nada. Documentos de MDN . Tal vez quisiste decir .map()
.map()
, lo que hizo fue simplemente copiar el objeto y, por lo tanto, loopedObj
aún se verá this.inputs
. Casi lo mismo que values.map((item) => item))
Y ahora cuando hiciste esto:
const jsonValues = { zone: { capping: { values } } }
Es como si acabaras de hacer:
const jsonValues = { zone: { capping: { values: this.inputs } } }
Porque const values = this.inputs
nunca cambiaron en ninguna parte de su código. Ni siquiera intenté usar loopedObj
también.
Solución:
const values = {} this.inputs.forEach((item) => { values[item.key] = item.value }) const json = { zone: { capping: values } }
Entonces tal vez JSON.stringify()
si lo necesita.