Vuejs - How to get all unique values in a array (remove duplicates) using v-for

Question

How to show only one button per every distinct date ?

can i use two v-for loops ? how to select distinct values in my loop?

<div v-for="question in allQuestions" >
  <button v-for="date in question.date">
    {{date}}
  </button>
</div>

Data model :

allQuestions : []
question : {'id' : '123' , 'date' : '25'}

Jolda

yes you can use two loops like you did, but your object should be inside your array within array. like: allQuestions : [ question : {'id' : '123' , [{'date' : '25'},{'date' : '25'},{'date' : '27'}]}, ] – Ptolemaic

@Najamussaqib distinct values – Jolda

you can select or bind the value like this. <button v-for="date in question.date"> {{date.id}} </button> – Ptolemaic

@Najamussaqib doesn't work. because data don't have an id attribute. – Jolda

this is because your allQuestions array have nothing in it. put your question object inside your allQuestion array. – Ptolemaic

you data should look like this.: allQuestions = [ { question : [ {'id' : '1' , 'date' : '25'}, {'id' : '2' , 'date' : '26'}, {'id' : '3' , 'date' : '27'} ] } ] – Ptolemaic

Answer 1

You can use Set:

The Set object lets you store unique values of any type, whether primitive values or object references.

MDN's example:

const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]

console.log([...new Set(numbers)])

Just modify it to your needs.

Sherburne

This will not work as the objects in OP's allQuestions array are not unique – Stereotyped

@Stereotyped well it's quite unsure what the OP really wants as the title is "Vuejs - How to get all unique values in a array (remove duplicates) using v-for" where Set works just fine. – Sherburne

So how would you use Set to get the all objects within an array where all the values of a certain property of each object are unique . I'm honestly interested. – Stereotyped

@Stereotyped can you be more specific? "where all the values of a certain property of each object are unique" - isn't the requierment to find the unique ones, not all of them? Also please create a fiddle for testing. – Sherburne

It's exactly the same question as OP asked, considering the type of data he included. Ill make a fiddle – Stereotyped

@Stereotyped sorry for the late answer. I misunderstood the OP so yes, you are right - with only Set I doubt it's possible. However you can use reducer, filter, map,... to achieve that the OP wants. – Sherburne

Answer 2

Use reduce to execute a reducer function on each item of the array, then merge the individual matches into the existing object with assign. This merging process takes care of removing (or actually replacing) duplicate items.

const vm = new Vue({
  el: '#app',

  data() {
    return {
      allQuestions: [
        { id: '123', date: '14' },
        { id: '456', date: '2' },
        { id: '933', date: '2' },
        { id: '789', date: '7' },
        { id: '220', date: '14' }
      ]}
  },

  computed: {
    uniqueQuestions() {
      return this.allQuestions.reduce((seed, current) => {
        return Object.assign(seed, {
          [current.date]: current
        });
      }, {});
    }
  }
});

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

<div id="app">
  <div v-for="question in uniqueQuestions" :key="question.date">
    <button v-for="date in question.date">
    {{date}}
  </button>
  </div>
</div>

Basipetal

Although I'm not very sure with how you wanted the format of question.date to be like. In your example, you had it as string but I don't get why you would v-for the individual dates as char? – Basipetal

Answer 3

You can use computed to display an array of all your questions sorted by date.

Ogata

any other solution ? – Jolda