Show Only One Value In Dropdown If There are Duplicates

Question

Hi i'm trying to get the information of printers by the location. so if i have few printers at the same location ill see them both at the dropdown but i actually want to see only one location on the dropdown if they are the same location. i know i can solve this in the database level and add relationships but maybe there is a way to do it without it ?

import {
  Component,
  OnInit
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';
import {
  DomSanitizer
} from '@angular/platform-browser';
import {
  Values
} from '../Models/Values';




@Component({
  selector: 'app-value',
  templateUrl: './value.component.html',
  styleUrls: ['./value.component.css']
})


export class ValueComponent implements OnInit {
  selectedPrinter: Values;
  values: any;





  constructor(private http: HttpClient, public sanitizer: DomSanitizer) {}



  ngOnInit() {
    this.getValues();


  }

  getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = response;
    }, error => {
      console.log(error);
    })
  }





}

<H2>Printer Manager</H2>
<div id="selectCompanyDiv">
  <div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label for="">Select Location</label>
    <select class="form-control" [(ngModel)]="selectedPrinter">
      <option *ngFor="let each of values " [ngValue]="each.location">{{each.location}} </option>
      <!-- {{each.specificLocation}} -->
    </select>
    <!-- Search -->
    <!-- <input id="test" *ngFor="let each of values " class="form-control" type="search" placeholder="Search"  {{values.location}}>

         <button ondblclick="Access()">click here 
        </button> -->
  </div>
  <br>
  <br>
  <div>
    <div *ngFor="let value of values" id="mainDiv">
      <div *ngIf="value.location===selectedPrinter">
        <span>HostName: {{value.hostName}}</span>
        <br>
        <!-- <span>Location: {{value.location}}</span> -->

        <span>Manufacturer: {{value.manufacturer}}</span>
        <br>
        <span>IP: {{value.ip}}</span>
        <br>
        <h2>{{value.location}}</h2>
        <span>{{value.specificLocation}}</span>
        <br>
        <a target="_blank" [href]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')">Full view</a>
        <div>
          <div *ngIf="value.model==='J480'" class="outerFrame">
            <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrotherj480" scrolling="no"></iframe>
          </div>
          <div *ngIf="value.model==='6530DW'" class="outerFrame">
            <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrother6530DW" scrolling="no"></iframe>
          </div>
        </div>
      </div>
    </div>

Does this answer your question? [ngFor full list and unique list](https://stackoverflow.com/questions/51662392/ngfor-full-list-and-unique-list) — Siddharth Seth, May 29 '20 at 04:12
Create a Set of your locations array: `new Set(myLocationsArray)` and pass it to your `select` element — max, May 29 '20 at 04:49
can u show me on the code? ive done that and its not working im missing something?? — Chen Tmv, May 29 '20 at 04:53

score 1 · Answer 1 · answered May 29 '20 at 06:38

1

getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = [...new Set(response)];
    }, error => {
      console.log(error);
    })
  }

answered May 29 '20 at 06:38

aks44

422
3
12

First of all thank you, but im still getting error No overload matches this call. (red underline under the response Argument of type 'Object' is not assignable to parameter of type 'Iterable' – Chen Tmv May 29 '20 at 15:40

score 0 · Answer 2 · answered May 29 '20 at 06:12

What i would do is the following:

In getValues():

 getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = Array.from(new Set(response));
    }, error => {
      console.log(error);
    })
  }

Take a look at Array.from documentation and Array.from(set)

Good luck!

Show Only One Value In Dropdown If There are Duplicates

2 Answers2