Exploring the Depths of Nested Arrays: A Guide to Efficiently

My array has a nested structure like this:

"meetingTime":[
         [
            {
               "date":"2021-05-30",
               "startTime":"15:30",
               "endTime":"11:11"
            }
         ],
         [
            {
               "date":"2021-06-29",
               "startTime":"17:00",
               "endTime":"19:00"
            }
         ],
         [
            {
               "date":"2021-06-29",
               "startTime":"14:00",
               "endTime":"15:06"
            },
            {
               "date":"2021-06-29",
               "startTime":"14:00",
               "endTime":"12:00"
            }
         ]
      ]
   }
]

I am trying to loop through this array and display the available times for each date. For instance, for the date 2021-06-29, the available times would be startTime 14:00 - 12:00 and startTime 14:00 - 15:06. Here is how I have constructed my array:

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

export default {
  name: "GenerateMeetingSettings",

  data: () => ({
    selectedTime: [],
    finalMeeting: [],
    datesFinal: [{meetingName: "",
      meetingTime: []}] ,
    dates: new Date().toISOString().substr(0,10),
    meetingSettingUrl: "",
    meetingPW: "",
    generatedLink: false,
    meetingName: "",
    dialog: false,
    menu: false,
    modal: false,
    menu2: false,
    menu3: false
  })
,

  methods:{

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

          this.selectedTime = []


    },

Here is my attempt at displaying the values, but it's not working as expected. Can anyone help me with this issue?

Error message:

[Vue warn]: Property or method "time" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <GenerateMeetingSettings> at src/components/GenerateMeetingSettings.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

eval @ main.js?56d7:21
./src/main.js @ app.js:1273
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1358
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
Show 48 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'meetingTime' of undefined"

found in

---> <GenerateMeetingSettings> at src/components/GenerateMeetingSettings.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'meetingTime' of undefined
    at Proxy.render (GenerateMeetingSettings.vue?90fe:384)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm
javascripttypescriptvue.jsvuetify.js

Answer №1

<v-col cols="12" v-for="(time, timeIndex) of time.meetingTime" key="index2">
is expecting a variable named time to iterate over time.meetingTime.

Since your data doesn't include a property called time, this is causing the error. Perhaps you meant to use selectedTime instead?

Answer №2

There are a few areas in the code that are causing confusion.

  1. <h4>{{i.meetingTime.date}}</h4>
    Where is i defined?
  2. <v-chip-group v-if="i.times.length !== 0">
    Does i have a times property?

Below is the untested code snippet I have written:

<v-col cols="12" v-for="(timesForDate, i) in meetingTime" key="i">
  <h4>{{ timesForDate[0].date }}</h4>
  <v-chip-group v-if="time.length">
    <v-chip v-for="(time, j) in timesForDate" :key="j">
      {{ time.startTime + ":" + time.endTime }}
    </v-chip>
  </v-chip-group>
</v-col>

In the initial loop, meetingTime refers to an array provided earlier in the post. Since it is an object value, it can be replaced with something like datesFinal.meetingTime.

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

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

While working on my Ionic project, I encountered an error in Angular when trying to fetch data from an API using HttpClient. The error message that popped up was 'Property 'name' does not exist on type '{}'.'. Below is the cod ...

javascriptangulartypescriptionic-frameworkionic2

What is the best way to showcase MongoDB data in ReactJS upon clicking a button?

I have embarked on a React project using Express.js, MongoDB, React.js, and Node.js. My goal is to fetch data from a backend API that is running on port 5000. When I test the API using Postman, everything works perfectly fine. The data is displayed in the ...

javascriptnode.jsmongodbreactjsmern

Troubleshoot: How to Fix the socket.io net::ERR_CONNECTION_TIMED_OUT

I am facing an issue with my website's real-time chat functionality. It works perfectly on localhost without any errors. However, when I try to run it on the server, I encounter the following error: http://my.domain:52398/socket.io/?EIO=3&transpo ...

javascriptnode.jssocketschatlivechat

Retrieve information and display it in a text field using ajax

Hi there, I'm having some trouble with my current code and would appreciate any help you can offer. My goal is to filter data in a search box and display the corresponding results in text boxes. I've been searching online for hours trying to find ...

javascriptphpmysqlajax

Fetch() is not executing in the expected sequence

I've been working on setting up an API to pull a word and save it to state. A function should then read that state and perform its intended task. However, my original coding approach caused it to run out of order. The third code snippet was able to fi ...

javascriptreactjsfetch-api

The Axios plugin in VueJS seems to be getting confused with the URLs, as it is combining 'localhost' with the actual URL causing errors

Recently, I started a project using Vue-cli and encountered an issue with the axios get request not functioning as expected. axios.get("​https://pokeapi.co/api/v2/​pokemon") .then(response => { this.pokemons = response.da ...

vue.jsaxiosxmlhttprequestvue-cli

The Intricacies of Next.js Design

Seeking guidance on Next.js architecture ...

javascriptnode.jsreactjsarchitecturenext.js

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Trying to integrate Typescript into my react project and encountering a particular error: Type 'string' is not assignable to type 'Color | undefined'. The issue arises when I have the following setup... const foo = {stuff:"succes ...

javascriptreactjstypescriptmaterial-ui

Display an iframe using React in multiple areas across the app with the same state

Within my React scenario, we display a BI dashboard using an iframe on the page, allowing users to interact with the frame and potentially filter the BI data. I've developed a feature that enables this iframe to expand into a full-screen dialog for en ...

javascriptreactjsiframeamazon-quicksight

Issue in PHP / MySQL: Only the most recent ID is deleted during multiple deletions

I've encountered an issue with my code regarding deleting multiple data from a MySQL database that is populated from a Select Option. For example, when I select data with ids 5, 2, and 4, and then press the delete button, only the latest id (5) gets ...

javascriptphpjquerymysqlbootstrap-4

Creating JPEG images with specified dimensions. How can you add W x H sizing to an image?

I have been searching for a Deno/TypeScript code snippet that can create basic images with dimensions embedded on them. I have provided an example of the code below, which generates images in JPEG format, base64, and dataURL. The code works by adding RGB ...

typescriptjpegdeno

Troubleshooting Vue: Why Your Computed Component Isn't Triggering

I have been utilizing the Vue extension in Chrome for some time now. However, when I disable it, all my computed components stop working properly. The data for these components is fetched from Django. Here's an example: import axios from 'axios&a ...

vue.js

Trouble with triggering events from Datatable buttons

Below is the code snippet I am currently using for my DataTable : var oTable12= $('#example').DataTable({ "aaData": tableData, "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]], "iDisplayLength": 5, "aoColumnDefs ...

javascriptjquerydatatable

What could be the reason for the counter not being incremented when the button is clicked

While attempting to increase the counter in my test, I encountered an issue where pressing the button did not change the value. I tried using both fireEvent from React testing library and React test utils, but the value remained at 10. My project is using ...

javascriptreactjsdom

Python web application encountering issues running in browser

After successfully creating a Python desktop application with Tkinter library, we decided to convert it into a web app using pyjamas. The conversion process generated html files and javascripts as expected. However, when attempting to open the html file i ...

javascriptpython-2.7web-applicationstkinterpyjamas

Utilize Magnific Popup to target the parent iframe

I am working on a web page that contains several small iframes. I am trying to implement a feature where when a user clicks on a button inside one of the iframes, a large form with type: inline should open up in the parent page instead of within the ifra ...

javascriptjqueryiframemagnific-popup

I was working with node.js when I encountered the following issue: 'server' is declared but its value is never read.ts(6133) from the line "var server = app.listen(3000, listening);"

While working on the 8.6 lesson in the api2 folder, I encountered an error/bug. Upon inspection of my server.js file, I identified and rectified the issue. However, when I revisited the api1 folder for the 8.5 lesson, everything was functioning correctly a ...

javascriptnode.jsapiexpressserver

Attempting to save data to an external JSON file by utilizing fs and express libraries

I've encountered a challenge while attempting to serialize an object into JSON. Despite my best efforts, I keep encountering an error that has proven to be quite stubborn... Below is the code snippet that's causing the issue: APP.post('/api ...

javascriptnode.jsjsonexpressnode.js-fs

What is the reason behind vue-datepicker automatically adding 4 hours to the user-selected time input?

I'm currently facing an issue with integrating vue-datepicker within Laravel Breeze/Vue. For some reason, the datepicker seems to add 4 hours to the time selected by the user. This means that if a user picks 10:00 AM, the datepicker displays it as 14: ...

laravelvue.jsdatepicker

What is the best way to create this server backend route?

I'm currently working on a fullstack project that requires a specific sequence of events to take place: When a user submits an event: A request is sent to the backend server The server then initiates a function for processing This function should ru ...

javascriptnode.jsexpress