How to loop through array and visually show single elements in vue

Question

I have a application where I have a small form where the user can add one date with multiple start and end times and then it is put inside an array. This process can be repeated as many times as needed.

this is how that array looks:

datesFinal: {meetingName: "", meetingPw:"", meetingUrl: "",
      meetingTime: []} ,

In meetingTime date,start,endtime will be saved. one value form could be like this:

 "meetingTime":[
      {
         "date":"2021-06-21",
         "startTime":"15:30",
         "endTime":"16:30"
      },
      {
         "date":"2021-06-21",
         "startTime":"15:30",
         "endTime":"17:30"
      },

What I want to achieve now is that my app loops through this array and looks if the date is same for the two objects in this case two times 2021.06.21 it should be displayed like this:

2021.06.21 15:30-17:30 15:30-16:30

THe times belonging to the same date should be collected under it.I tried looping though the array to first of show the complete object without any filtering as starters. But I am getting the error that it is undefined (times undefined).

Could someone look at my code and give me a pointer:

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

I recommend using a computed for the logic instead of inside tricky, nested v-for's and a v-if — Dexygen
– Dexygen, Commented Jun 2, 2021 at 19:25
how do you mean it? I am pretty new to vue have to make my thesis with it — natyus
– natyus, Commented Jun 2, 2021 at 19:29

muka.gergely · Accepted Answer · 2021-06-02 20:29:33Z

My advice would be: don't try to solve it by tweaking the UI. Transform your data to the desired structure and let the template iterate over the simplest data structure that you can come up with.

new Vue({
  el: "#app",
  data() {
    return {
      datesFinal: {
        meetingName: "This is the meeting name",
        meetingTime: [{
            "date": "2021-06-21",
            "startTime": "15:30",
            "endTime": "16:30"
          },
          {
            "date": "2021-06-21",
            "startTime": "15:30",
            "endTime": "17:30"
          },
          {
            "date": "2021-06-23",
            "startTime": "15:30",
            "endTime": "16:30"
          },
          {
            "date": "2021-06-22",
            "startTime": "15:30",
            "endTime": "17:30"
          },
          {
            "date": "2021-06-20",
            "startTime": "15:30",
            "endTime": "16:30"
          },
          {
            "date": "2021-06-22",
            "startTime": "15:30",
            "endTime": "17:30"
          },
        ],
      },
    }
  },
  methods: {
    // grouping the meeting times by date
    // the function expects an array of objects
    // with a structure:
    // [{ date: "foo", startTime: "bar", endTime: "baz" },
    // { date: "foo", startTime: "bar3", endTime: "baz3" },
    // { date: "foo2", startTime: "bar2", endTime: "baz2" }]
    // it creates an Object with a structure:
    // { foo: ["bar-baz", "bar3-baz3"], foo2: ["bar2-baz2"] }
    processMeetingTimes(meetingTimeArray) {
      const ret = meetingTimeArray
        .reduce((a, c) => {
          if (!(c.date in a)) a[c.date] = []
          a[c.date] = [...a[c.date], `${c.startTime}-${c.endTime}`]
          return a
        }, {})
      console.log("processMeetingTimes", ret)
      return ret
    },
    // creating the array of strings that the v-for
    // can iterate over easily
    // it expects an Object with a structure:
    // { foo: ["bar-baz", "bar3-baz3"], foo2: ["bar2-baz2"] }
    // and creates an Array with a structure:
    // ["foo bar-baz bar3-baz3", "foo2 bar2-baz2"]
    createMeetingTimeArray(processedMeetingTimes) {
      const ret = Object.entries(processedMeetingTimes).map(([key, val]) => `${key} ${val.join(" ")}`)
      console.log("createMeetingTimeArray", ret)
      return ret
    },
  },
  template: `
    <div>
      {{ datesFinal.meetingName }}
      <div
        v-for="time in createMeetingTimeArray(
          processMeetingTimes(datesFinal.meetingTime)
        )"
        :key="time"
      >
        {{ time }}
      </div>
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Collectives™ on Stack Overflow

How to loop through array and visually show single elements in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related