Vue ignore data repetition

Question

I am new on Vue and trying to remove data repetition from my array objects.

VIEW

<div id="app">
  <h2>Programming Classes Time</h2>
  <div v-for="todo in todos">
    <p>{{todo.time}}</p>

/** Is there a way to display 7:00 PM only once and under 7:00 PM display Javascript, JQuery and PHP **/
/** display 8:00 PM only once and under it there should be CSS, HTML and MySQL **/

    <p>{{todo.text}}</p>
    <br/>
  </div>
</div>

SCRIPT

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Javascript", time: "7:00 PM" },
      { text: "JQuery", time: "7:00 PM" },
      { text: "PHP", time: "7:00 PM" },
      { text: "CSS", time: "8:00 PM" },
      { text: "HTML", time: "8:00 PM" },
      { text: "MySQL", time: "8:00 PM" }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Is there a way to display 7:00 PM only once and under it display Javascript, JQuery and PHP as an image below?

Below is my code on jsfiddle

https://jsfiddle.net/ujjumaki/hu9ytvwn/14/

How **exactly** do you want the _"Javascript, JQuery and PHP"_ to display? — Phil, May 27 '20 at 04:31
@Phil its suppose to display 7:00PM --> PHP -> Javascript -> JQuery. I will update my question with an image so that it will be more clear. — Yahoo, May 27 '20 at 04:46

Phil · Accepted Answer · 2020-05-27T04:56:26.960

2

Create a computed property to group your data. For example

computed: {
  todosByTime () {
    const grouped = this.todos.reduce((map, { text, time }) => {
      let group = map.get(time) || map.set(time, []).get(time)
      group.push(text)
      return map
    }, new Map())

    return Array.from(grouped, ([ time, texts ]) => ({ time, texts }))
  }
}

Now you can use this in your template

<dl>
  <template v-for="todo in todosByTime" :key="todo.time">
    <dt>{{ todo.time }}</dt>
    <dd v-for="text in todo.texts">{{ text }}</dd>
  </template>
</dl>

edited May 27 '20 at 04:56

answered May 27 '20 at 04:47

Phil

157,677
23
242
245

its my mistake that you got confused with my comment before and solved it adding "-->" on it. I just uploaded an image to my question , is there a way to display JavaScript,PHP and JQuery without --> . – Yahoo May 27 '20 at 04:54
@Yahoo you can format the data however you want. I've update my answer to use a [description-list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) which seems like a good fit – Phil May 27 '20 at 04:57

score 1 · Answer 2 · answered May 27 '20 at 05:38

you can try:

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Javascript", time: "7:00 PM" },
      { text: "Java", time: "8:00 PM" },
      { text: "JQuery", time: "7:00 PM" },
      { text: "PHP", time: "7:00 PM" },
      { text: "CSS", time: "8:00 PM" },
      { text: "HTML", time: "8:00 PM" },
      { text: "Python", time: "7:00 PM" },
      { text: "MySQL", time: "8:00 PM" },
    ],
    resolvedTodos: {}
  },
  mounted() {
    this.resolvedTodos = this.todos.reduce((acc, item) => {
      acc[item.time] = 
        !Object.keys(acc).find(a => a === item.time) 
          ? [item.text] 
          : [...acc[item.time], item.text]
      return acc
    }, {})
  },
  methods: {
    toggle: function (todo) {
      todo.done = !todo.done;
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <h2>Programming Classes Time</h2>
  <div v-for="(langs, time in resolvedTodos">
    {{ time }}
    <div v-for="lang in langs">
      {{ lang }}
    </div>
    <br />
  </div>
</div>

Vue ignore data repetition

2 Answers2