CODEWITHSUNDEEP
angular
cfoster5
cfoster5

Reputation: 1826

Remove duplicate select options

Using Angular 5, I created a select dropdown that is being populated by data from a web request. I'd like to remove items that have duplicate object properties of DocumentGroup. How would I do this without combining jQuery and Angular?

Here is my HTML:

<select class="form-control">
  <option *ngFor="let doc of docs; [value]="doc.DocumentGroup">
    <span>
      {{doc.DocumentGroup}}
    </span>
  </option>
</select>

The TS for the web request:

  ngOnInit() {
    this.http.get("https://test.com/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$orderBy=ID").subscribe(data => {
      console.log("data", data);
      console.log("data.value", data['value']);
      this.docs = data['value'];
    });
  }

Upvotes: 1

Views: 3704

Answers (2)

72GM
72GM

Reputation: 3124

You would do this in your TypeScript file and filter out any duplicates before populating your this.docs collection.

Upvotes: 0

cfoster5
cfoster5

Reputation: 1826

I was able to get this to work by looping through the results, adding each DocumentGroup property to an array, and then getting the unique items from that array by using the method that @72GM mentioned.

The entire function now looks like this:

  ngOnInit() {
    this.http.get("https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$orderBy=ID").subscribe(data => {
      console.log("data", data);
      console.log("data.value", data['value']);
      this.docs = data['value'];

      for (let i = 0; i < this.docs.length; i++) {
          this.docs[i];
          console.log("DocGroup loop", this.docs[i].DocumentGroup)
          this.docgroups.push(this.docs[i].DocumentGroup)
          console.log("DocGroupArray", this.docgroups)
      }

      this.unique = Array.from(new Set(this.docgroups));
      console.log(this.unique)

    });
  }

Upvotes: 0

Related Questions