CODEWITHSUNDEEP
arraysfor-loopvue.jsvuejs2
wbdlc
wbdlc

Reputation: 1089

Remove Duplicates From For Loop

How can I remove the duplicate items from my for loop?

I assume via a computed function or is there something I can simply add to the loop below to only output the duplicates from my data.

 <div v-for="(item, index) in info" :key="index" class="form-check">
    <div v-for="(cat, index) in item.category_data" :key="index">
        <input type="checkbox" class="form-check-input" v-model="cat_data" :id="index" :value="index">
        <label class="form-check-label">{{ cat }}</label>
    </div>
</div>

Code Pen with duplicates: https://codepen.io/anon/pen/XxNORW?editors=1010

Thanks

Upvotes: 0

Views: 745

Answers (2)

GWed
GWed

Reputation: 15653

I think you are trying to do too much in your markup. Keep any data processing as small as possible in markup.

I'd therefore advise that you use a filter to return an array with the duplicates removed.

Markup

 <div v-for="(filteredArray(arr), index) in info" :key="index" class="form-check">
   ...
</div>

Script

Add the filtered property to your vue.js instance.

filters: {
  filteredArray: function (array) {
    let data = {}
    this.info.forEach(i=>{
      Object.assign(data,i.category_data)
     })
    return data;
  }
}

Upvotes: 1

Timothy Lee
Timothy Lee

Reputation: 828

I think there're many ways to achieve "Remove Duplicates From For Loop"

just make a example:

remove_category_duplicates: function () {
    // Get all categories and remove duplicates
    let data = {}
    this.info.forEach(i=>{
        Object.assign(data,i.category_data)
    })
    return data;
 }

codepen

Upvotes: 1

Related Questions