Building Json Object from Vue input fields

Question

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.

captainskippah · Accepted Answer · 2022-02-03 15:10:44Z

3

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:

you used forEach which just loops over the array. it won't return anything. MDN Docs. Maybe you meant .map()
Even if you use .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.

answered Feb 3, 2022 at 15:10

captainskippah

1,59110 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jfr01 Over a year ago

Your solutions works, however after continuing my integration, the json object generated will generate numbers as strings with double quotes. (ex: "duration":"300") this breaks my API put call since the value needs to be passed as a Number instead (without the double quotes). Do you know a way around this?

Collectives™ on Stack Overflow

Building Json Object from Vue input fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related