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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.