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.