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 — Siddharth Seth
– Siddharth Seth, Commented May 29, 2020 at 4:12
Create a Set of your locations array: new Set(myLocationsArray) and pass it to your select element — max
– max, Commented May 29, 2020 at 4:49
can u show me on the code? ive done that and its not working im missing something?? — Chen Tmv
– Chen Tmv, Commented May 29, 2020 at 4:53

aks44 · Accepted Answer · 2020-05-29 06:38:58Z

1

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

answered May 29, 2020 at 6:38

aks44

4423 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chen Tmv Over a year ago

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<Values>'

Ignacio Mariano Chiodo · Accepted Answer · 2020-05-29 06:12:44Z

0

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!

answered May 29, 2020 at 6:12

Ignacio Mariano Chiodo

232 silver badges5 bronze badges

Collectives™ on Stack Overflow

Show Only One Value In Dropdown If There are Duplicates

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related