CODEWITHSUNDEEP
javascriptvue.js
PJJ
PJJ

Reputation: 87

Cant remove duplicate items in collection in VueJS

I am trying to remove duplicate items from a collection that I request via an API in Laravel.

This is my code:

computed: {
      // slice the array of data to display

      filteredList() {

        /* NEW PART */


            var tips = this.dublicate;

            /* END NEW PART */



          tips = this.items.filter(item => {
            return item.tip.toLowerCase().includes(this.search.toLowerCase())
          })
          return tips.slice(0, this.display);

      },

      dublicate() {

        var filtered_array = [];
        for(var i =0; i < this.items.length; i++) {
            if(this.items[i].tip.toLowerCase() != this.items[i+1].tip.toLowerCase()) {
              filtered_array.push(this.items[i])
            }
        }
        return filtered_array;
      }
   }
   }

If I remove the code within the NEW PART comments, everythin works fine. In the NEW PART I am trying to remove duplicate content, based on the items tip attribute. If the tip attribute is the same as the next items tip attribute, it should be excluded from the tips array, which is returned as a v-for="tips in filteredList".

However, I just get an empty array with this new part. What am I doing wrong?

I get the following from Vue Devtools: 

dublicate:"(error during evaluation)"
filteredList:"(error during evaluation)"

An example data from items, that are from an API request:

enter image description here

(This is the data that I get, when I dont try to remove duplicates, which works)

As this is in VueJS, I cant use the answer provided here.

Upvotes: 1

Views: 1433

Answers (1)

Roy J
Roy J

Reputation: 43899

You are looking past the end of the array with i + 1. You need to push the last item without looking for the one after it (because there isn't one). I think using filter is more straightforward than building an array with a for loop.

dublicate() {
  return this.items.filter((a, i) =>
    i === this.items.length - 1 ||
    a.tip.toLowerCase() !== this.items[i + 1].tip.toLowerCase()
  );
}

Upvotes: 3

Related Questions