Tips for creating a nested array in Vue.js in the correct way

In my Vue application, I am currently receiving a JSON object structured like this:

    [
       {
          "meetingName":"ewq",
          "meetingUrl":"",
          "meetingPw":"",
          "date":"2021-05-30",
          "times":[
             {
                "startTime":"15:30",
                "endTime":"16:30"
             },
             {
                "startTime":"17:30",
                "endTime":"18:30"
             }
          ]
       },
       {
          "meetingName":"ewq",
          "meetingUrl":"",
          "meetingPw":"",
          "date":"2021-05-31",
          "times":[
             {
                "startTime":"15:30",
                "endTime":"16:30"
             }
          ]
       }
    ]

My goal is to have the JSON object structured like this instead:

      {
      "meetingName":"Test",
      "meetingPw":"test22",
      "meetingUrl":"localhost",
      "meetingTimes":[
         {
            "date":"15.12.2020",
            "times":[{
               "startTime":"15:00",
               "endTime":"16:00"
            }]
         },
         {
            "date":"25.12.2020",
            "times":[
               {
                  "startTime":"17:00",
                  "endTime":"18:00"
               },
               {
                  "startTime":"19:00",
                  "endTime":"2:00"
               }
            ]
         }
      ]
   }

Despite trying, I can't seem to modify my code to achieve the desired structure. Can someone please review my code and point out where I might be going wrong?

    <script>
    import DatePickerComponent from "@/components/DatePickerComponent";
    
    export default {
      name: "GenerateMeetingSettings",
    
      data: () => ({
        selectedTime: [],
        dates: new Date().toISOString().substr(0,10),
        datesFinal: [],
        meetingSettingUrl: "",
        meetingPW: "",
        generatedLink: false,
        meetingName: "",
        dialog: false,
        menu: false,
        modal: false,
        menu2: false,
        menu3: false
      }),
    
      methods:{
    
        addTimeFields(){
    
          this.selectedTime.push({
            startTime:"",
            endTime: "",
          })
        },
        saveDateAndTIme(e) {
          this.datesFinal.push({
            meetingName: this.meetingName,
            meetingUrl: this.meetingSettingUrl,
            meetingPw: this.meetingPW,
            date: this.dates,
            times: this.selectedTime
            }
          )
          this.selectedTime  = [];
        },
    
        generateMeetingLink(){
         let meetinId = this.meetingName
          console.log(this.meetingName)
          this.meetingSettingUrl = "http://localhost:8080/" + meetinId
          this.generatedLink = true
    
          console.log(JSON.stringify(this.datesFinal))
    
    
        }
    
      }

I have included only the script section of my code as that's where the manipulation for the array takes place.

Answer №1

Here is the solution I have come up with:

<script>
import DatePickerComponent from "@/components/DatePickerComponent";

export default {
  name: "GenerateMeetingSettings",

  data: () => ({
    selectedTime: [],
    finalMeeting: [],
    datesFinal: [{meetingName: "",
      meetingTime: []}] ,
    dates: new Date().toISOString().substr(0,10)})
,

  methods:{

    addTimeFields(){
      this.selectedTime.push({
        date: this.dates,
        startTime:"",
        endTime: "",
      })
    },
    saveDateAndTIme(e) {
        this.datesFinal[0].meetingTime.push(this.selectedTime),

          this.selectedTime = []


    },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Javascript is experiencing a decrease in the variability of its content

I currently have multiple pages structured like this: <body> <table><tr><td align="center" width="100%"> --PAGE HTML-- </td></tr></table> </body> For a temporary period, I need to change the str ...

Tally up identical words without considering differences in capitalization or extra spaces

Let's take an example with different variations of the word "themselves" like "themselves", "Themselves", or " THEMSelveS " (notice the leading and trailing spaces), all should be considered as one count for themselves: 3 ...

Use a spy to mock a component method using karma and jasmine

Encountering this error message during testing: ERROR: 'Error during cleanup of component' The issue stems from the following code snippet : ngOnDestroy(){ methodCallToMock() } To address this, I need to mock the methodCallToMock() functi ...

Stopping the use of <script> tags within HTML form submissions

After launching my website at , I discovered that a user is attempting to redirect it to different websites using HTML form input tags. While I'm unsure of the exact method they are employing, I am seeking a way to block users from entering these nefa ...

Converting a string date-time range into JavaScript date objects: Step-by-step guide

Looking for help with converting a date-time range string into two javascript date objects? The string looks like this: 2019-06-14, 12:00:00 AM - 2019-06-15, 12:00:00 AM The start date is 2019-06-14, 12:00:00 AM. The end date is 2019-06-15, 12:00:00 AM. ...

The CORS policy has blocked access to XMLHttpRequest at 'http://localhost:8080/' from the origin 'http://localhost:3000'

There seems to be an issue with the CORS policy blocking access to XMLHttpRequest when trying to send a post request from NuxtJS frontend to a Node server hosted on localhost:3000. Despite using CORS in the app, the error persists, preventing insertion of ...

Conceal a div until reaching the end of the webpage by scrolling

Currently, I am working on a web page inspired by music release pages (check out an example here). My goal is to have certain hidden divs at the bottom of the page only reveal themselves once the user has scrolled all the way down, with a delay of a few se ...

What does [] represent in the context of the [].forEach.call() method?

I'm a bit confused about the meaning of [] in the code snippet below. Is it just indicating the most recently declared array? Can someone provide clarification? In this particular example, we have two arrays named racersList and volunteersList stored ...

Utilizing Treant.js within a Vue.js application

After attempting to integrate the Treant.js library into my Vue app for creating a tree diagram from JSON data, I encountered some errors. In my main view, here are the import statements... import Vue from "vue" import store from "../../store" import { ge ...

Relaunch jQuery script on dynamically loaded content via AJAX requests

Currently, I am utilizing the Advanced Ajax Page Loader plugin for wordpress to dynamically load content through ajax. However, I am encountering an issue where my custom jquery scripts do not execute properly when the content is loaded via ajax. Interesti ...

active option in Opencart 2.1 is set to "selected"

I've implemented the AJAX module d_quickcheckout to speed up the checkout process on opencart 2.1 (not the default one). However, I'm encountering an issue with a field in the payment address section that is always pre-selected with the region/st ...

Is it possible for the router to hold off until a promise is fulfilled before proceeding?

After implementing the code snippet provided by express router, an error occurs when trying to use another async function. The specific error message is: Error: Can't set headers after they are sent. Interestingly, upon removing the line await anot ...

Perform validation on input by monitoring checkbox changes in Angular 4

I am currently working on a project where I need to loop through an array of key values in order to create a list of checkboxes, each accompanied by a disabled input field as a sibling. The requirement is that upon checking a checkbox, the corresponding in ...

Find out if OpenAI's chat completion feature will trigger a function call or generate a message

In my NestJS application, I have integrated a chat feature that utilizes the openai createChatCompletion API to produce responses based on user input and send them back to the client in real-time. Now, with the introduction of function calls in the openai ...

Ways to transform date into a different structure using JavaScript

Fetching a date from an API gives me this format: 2017-04-20T07:00:00Z How can I convert it to the following format? 20.04.2017 I am using React to render the date: <div>{props.data.day}</div> I attempted to use toISOString().slice(0, 1 ...

Having trouble loading my script in the frontend plugin?

After much testing, I have discovered that when I place this code before the get_header() function, the script is successfully loaded. However, when I move it after the get_header() function, it no longer works as intended. It's important to note that ...

The data from the Flickr API is consistently unchanging

I created a simple weather app that retrieves weather data using a "POST" request and displays it successfully. Users have the ability to search for weather by city, and I wanted to enhance the app by loading an image of that city through a separate jQuer ...

What is the reason behind my page automatically scrolling to the bottom when it loads?

I am currently working on a project for my company, and unfortunately, I cannot share the code as it is proprietary. However, I am encountering a problem where the page loads and automatically scrolls to the bottom. I have checked for any unclosed tags in ...

Perform two functions in order using jQuery within a loop

Just dipping my toes in the waters of Javascript. Please go easy on me :) I'm working with two functions that both involve making jQuery requests within for loops. Here's an example: function x(y,z) { for (var i = 0; i < y; i ++) { $.a ...

Fetching JSON data cross-domain with the help of JavaScript or JQuery

I am currently attempting to retrieve JSON data from this specific url. However, I am encountering difficulties in making it function as intended. The goal is to seamlessly integrate the school's lunch menu utilizing NutriSlice. We are leveraging Ris ...