[Vuejs]-Vue js removing duplicate values from filtered array of objects

by

1👍

You can create computed property and remove duplicates:

var app = new Vue({
  el: "#app",
  data() {
    return {
      clientId: 0,
      clients: [{"id": 1, "clientName": "Rafael Ellison"},
        {"id": 2, "clientName": "Tad Beasley"}, 
      ],
      categories: [{"clientId": 1, "purchaseType": "Purchase Type  1"},
        {"clientId": 1, "purchaseType": "Purchase Type  1"},
        {"clientId": 1, "purchaseType": "Purchase Type 2"},
        {"clientId": 1, "purchaseType": "Purchase Type 2"},
        {"clientId": 2, "purchaseType": "Purchase Type 2"},
        {"clientId": 1, "purchaseType": "Purchase Type 3"},
        {"clientId": 1, "purchaseType": "Purchase Type 3"},
        {"clientId": 2, "purchaseType": "Purchase Type 3"},
        {"clientId": 1, "purchaseType": "In veritatis anim al"}
      ],
    }
  },
  computed: {
    unique() {
      return [...new Map(this.categories.map(v => [JSON.stringify(v), v])).values()]
    },
    filteredPurchase() {
      return this.unique.filter(
        (client) => client.clientId == this.clientId
      );
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div>
    <div>
      <label>Under Client</label>
      <select v-model="clientId">
        <option value="" selected>select clients</option>
        <option v-for="client in clients" :key="client.id" :value="client.id">{{client.clientName}}</option>
      </select>

    </div>

    <div>
      <label for="purchaseCategoryId">Purchase Type</label>
      <div class="input-group">
        <select multiple>
          <option value="" selected>select purchase Type</option>
          <option v-for="purchase in filteredPurchase" :key="purchase.id" :value="purchase.purchaseType">{{purchase.purchaseType}}</option>
        </select>
      </div>
    </div>
  </div>

</div>

0👍

This is more of a JS-related issue.

You can use the Set constructor which let us create sets, which are data structures that don’t have duplicate items.

Here I fixed it in this way-

  1. I used the Set operator with JSON.stringify to create a set of stringified objects.
  2. Convert the set back to the array using the spread(...) operator
  3. Convert the array of strings back to the array of objects using JSON.parse.

And, the same purchaseTypes with the same clientId will be removed. See the demo-

var app = new Vue({
  el: "#app",
  data() {
    return {
      clientId: 0,
      clients: [{
          "id": 1,
          "clientName": "Rafael Ellison"
        },
        {
          "id": 2,
          "clientName": "Tad Beasley"
        },

      ],
      categories: [{
          "clientId": 1,
          "purchaseType": "Purchase Type  1"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type  1"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 2"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 2"
        },
        {
          "clientId": 2,
          "purchaseType": "Purchase Type 2"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 3"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 3"
        },
        {
          "clientId": 2,
          "purchaseType": "Purchase Type 3"
        },
        {
          "clientId": 1,
          "purchaseType": "In veritatis anim al"
        }
      ],
    }
  },

  computed: {
    filteredPurchase() {
      let categories = this.categories.filter(
        (client) => client.clientId == this.clientId
      );
      return [...new Set(categories.map(a => JSON.stringify(a)))].map(a => JSON.parse(a))
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div>
    <div>
      <label>Under Client</label>
      <select v-model="clientId">
        <option value="" selected>select clients</option>
        <option v-for="client in clients" :key="client.id" :value="client.id">{{client.clientName}}</option>
      </select>

    </div>

    <div>
      <label for="purchaseCategoryId">Purchase Type</label>
      <div class="input-group">
        <select multiple>
          <option value="" selected>select purchase Type</option>
          <option v-for="purchase in filteredPurchase" :key="purchase.id" :value="purchase.purchaseType">{{purchase.purchaseType}}</option>
        </select>
      </div>
    </div>
  </div>

</div>

Leave a comment