Im trying to generate a JSON object with a vue method and using vue input data fields to build part of the JSON object. My input files accept a key and a value and i have two default values 'zone' and 'capping'. My goal is for the JSON object to be like:
{
"zone":{
"capping":{
"duration": 300
}
}
}
But instead i get a JSON object like this:
{
"zone":{
"capping":{
"values":[
{
"key":"duration",
"value":"300"
}
]
}
}
}
This is my vue method:
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))
}
This is the Vue code for the input fields:
<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>
Any advice? Many thanks.
Looking at your template:
<input v-model="input.key" type="text" @change="getKey($event)" />
<input
v-model="input.value"
type="text"
@change="getValue($event)"
/>
it looks like your input is an object that has properties key and value:
inputs: [
{
key: "",
value: ""
}
]
When you did this:
const values = this.inputs
const loopedObj = values.forEach((item) => {
const val = {
...item
}
return val
})
Problems are:
forEach which just loops over the array. it won't return anything. MDN Docs. Maybe you meant .map().map(), what you did is just copy the object and so loopedObj will stil look like this.inputs. Almost the same as values.map((item) => item))And now when you did this:
const jsonValues = {
zone: {
capping: {
values
}
}
}
It's as if you just did:
const jsonValues = {
zone: {
capping: {
values: this.inputs
}
}
}
Because const values = this.inputs never changed anywhere in your code. Never even tried to use loopedObj as well.
Solution:
const values = {}
this.inputs.forEach((item) => {
values[item.key] = item.value
})
const json = {
zone: {
capping: values
}
}
Then maybe JSON.stringify() it if you need it.