How to create a List Render JSON from a Dynamic List for an API response in Vue?

Question

I am a beginner in at Vue.js version 2.6.11.

I have a form where a person can add a list of toys. So the list is dynamic. How do we add this dynamic list into a JSON data structure in a POST request?

I cannot change the API.

For example the first list to send to a POST request might be

      "toyCollection": 
       [
        {
          "toyName": "yo-yo",
          "toyDescription": "ball on a string",
          "toyAge": 15,
          "company": {
            "companyName": "yo yo company"
            "companyYear": "1999"
          }
        }
      ]

The second time someone creates a list of toys in this dynamic list might be

      "toyCollection": 
       [
         {
          "toyName": "yo-yo",
          "toyDescription": "ball on a string",
          "toyAge": 15,
          "company": {
            "companyName": "yo yo company"
            "companyYear": "1999"
          }
        },
        {
          "toyName": "barbie",
          "toyDescription": "dolls in a house",
          "toyAge": 21,
          "company": {
            "companyName": "mattel"
            "companyYear": "1959"
          }
        },
        {
          "toyName": "transformers",
          "toyDescription": "robots in disguise",
          "toyAge": 20,
          "company": {
            "companyName": "Hasbro"
            "companyYear": "1984"
          }
        }
      ]

How do we write this in Vue so that this is dynamic?

   methods: {
     const postRequest = {
        toyCollection: [ //if 1 toy in list
          {
            toyName: "yo-yo", // this.form.toyName <---- would read the data
            toyDescription: "ball on a string", //hardcoded here for simplicity for example
            toyAge: 15,
            company: {
               companyName: "yo yo company"
               similarToysFromCompany: "1999"
            }
          }
        ]
       }
      }

If there are three toys in the collection

   methods: {
     const postRequest = {
        toyCollection: [ //if 3 toys in list
          {
            toyName: "yo-yo",
            toyDescription: "ball on a string",
            toyAge: 15,
            company: {
               companyName: "yo yo company"
               similarToysFromCompany: "1999"
             }
          },
          {
            toyName: "barbie",
            toyDescription: "dolls in a house",
            toyAge: 21,
            company: {
              companyName: "mattel"
              companyYear: "1959"
            }
          },
          {
            toyName: "transformers",
            toyDescription: "robots in disguise",
            toyAge: 20,
            company: {
              companyName: "Hasbro"
              companyYear: "1984"
             }
           }
         ]
       }
     }

The list can be any size, depending on how many toys a person adds to this list. How do we make this dynamic based on the list?

Then I would call my API with this object

this.methodCallToAPI(postRequest);

Thanks for any help!

============== EDIT

I have a template to input fields

         <form>
              <!-- Name -->
                  <input
                    v-model="form.toyName"
                    id="toy-name"
                    class="input"
                    type="text"
                  />
                </div>
          </form>

Then in the Script, it watches or updates the data fields based on what the user types into the input text fields.

export default {
  name: "CreateToyCollection",

  data () {
    return {
      form: {
        toyName: "",
        toyDescription: "",
        toyAge: "",
             company: {
               companyName: "",
               similarToysFromCompany: ""
             }
          }
        }
      },


  watch: {
      this.form.toyName = "";
      this.form.toyDescription = "";
      this.form.toyAge = "";
      // etc for Company
  }
}

I'm working on the list part, but this is how I want to pass in the dynamic data

When someone fills in the form and click a submit button, I get these fields from their text input — Suzy
– Suzy, Commented May 14, 2021 at 16:13
So where you are storing it, can you share some more code, like the script part. — Yash Maheshwari
– Yash Maheshwari, Commented May 14, 2021 at 16:15
I made an edit to share more code. I'm still working on how to store the list, but the data stored from the user input — Suzy
– Suzy, Commented May 14, 2021 at 16:46

T J · Accepted Answer · 2021-05-14 17:32:08Z

2

In the data add a new array toyCollection :

data () {
    return {
      toyCollection: [],
      form: {
        toyName: "",
        ...
      },
      ...

Every time form is submitted, push the submitted data to it like this.toyCollection.push(data)

Later in your post request you can send this.toyCollection as the payload.

answered May 14, 2021 at 17:32

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

4 Comments

Suzy Over a year ago

Thanks, what's in data? Would it be Is it this { toyName: this.form.toyName, toyDescription: this.form.toyDescription // etc } , then somehow iterate and create this part?

T J Over a year ago

@Suzy yes this part, you don't need to iterate, you can just push each item per form submission

Suzy Over a year ago

On the form, they can add multiple toys in one form submission. So I'm not sure how to deal with the multiple toys, and setting the values of the variables. Like { toyName: this.form.toyName1, toyDescription: this.form.toyDescription1 //etc }, { toyName: this.form.toyName2, toyDescription: this.form.toyDescription2, //etc} ?. A large number of toyName# can be added

Suzy Over a year ago

I figured it out with your example, thank you! :) The data I made it into a list of objects and the pushed it into the toyCollection.

Collectives™ on Stack Overflow

How to create a List Render JSON from a Dynamic List for an API response in Vue?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related