CODEWITHSUNDEEP
arraysangularobjecthtml-select
michelemalagnini
michelemalagnini

Reputation: 159

angular array object select specific elements

I work in angular v7. Below is my backend response

[
  {'type':'ex1','color':'red','extratype':'x'},
  {'type':'ex1','color':'yellow','extratype':'x'},
  {'type':'ex1','color':'blue',extratype:'f'},
  {'type':'ex1','color':'orange',extratype:'f'},
  {'type':'ex2','color':'gray','extratype':'r'},
  {'type':'ex2','color':'pink','extratype':'r'},
  {'type':'ex2','color':'purlple',extratype:'v'},
  {'type':'ex2','color':'green',extratype:'v'},
]

I store this response in a html options like this:

This is the ts file


responsebackend;

results: any[] = [];

types: [] = [];

extratypes: [] = [];

ngOnInit(){
  http.get(url)
.subscribe(res => this.responsebackend = res)
}


filter(){
  this.results = this.filterCode(this.resposebackEnd);
}

filterCode(res){
  let filtered: any[] = [];
  res.forEach(val => {
    filtered.push(val)
  }
 return filtered;
}


this.types = ['ex1','ex2'];

this.extratype = ['x','f','r','v'];

This is the ts code

<label for="types">TYPES</label>

<select name="types">
  <option *ngFor="let t of types">{{t}}</option>
</select>

<label for="extratypes">extra TYPES</label>

<select name="types">
  <option *ngFor="let ex of extratypes">{{ex}}</option>
</select>


<label for="results">RESULTS</label>

<select name="results">
  <option *ngFor="let r of results.color">{{r}}</option>
</select>

if I select for example types ex1 and extratypes f I want to see inside the results options html tag I want to see only the colors of types ex1 and extratypes f

this is a stackblitz of the problem

Upvotes: 0

Views: 1664

Answers (1)

SELA
SELA

Reputation: 6868

Please find the attached stackblitz here for working example.

Sample HTML :

<label for="types">TYPES</label>

<select name="types">
  <option *ngFor="let t of types">{{t}}</option>
</select>
<br />
<br />
<br />
<label for="extratypes">extra TYPES</label>

<select name="types">
  <option *ngFor="let ex of extratypes">{{ex}}</option>
</select>
<br />
<br />
<br />
<label for="results">RESULTS</label>

<select name="results">
  <option *ngFor="let r of results">{{r.color}}</option>
</select>

Sample TS File :

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  backendResponse = [
    { type: "ex1", color: "red", extratype: "x" },
    { type: "ex1", color: "yellow", extratype: "x" },
    { type: "ex1", color: "blue", extratype: "f" },
    { type: "ex1", color: "orange", extratype: "f" },
    { type: "ex2", color: "gray", extratype: "r" },
    { type: "ex2", color: "pink", extratype: "r" },
    { type: "ex2", color: "purlple", extratype: "v" },
    { type: "ex2", color: "green", extratype: "v" }
  ];

  results: any[] = [];

  types = ["ex1"];

  extratypes = ["f"];

  ngOnInit() {
    this.results = this.filterCode(this.backendResponse);
    this.results.filter(x => {
      x.type === this.types && x.extratypes == this.extratypes;
    });
    this.onchanging();
  }

  filterCode(res) {
    let filtered: any[] = [];
    res.forEach(val => {
      filtered.push(val);
    });
    return filtered;
  }

  onchanging() {
    let filterCondition = {
      extratype: this.extratypes[0],
      types: this.types[0]
    };
    console.log(filterCondition);
    this.results = this.backendResponse.filter(
      obj =>
        obj.extratype == filterCondition.extratype &&
        obj.type == filterCondition.types
    );
    console.log(this.results);
  }
}

Upvotes: 4

Related Questions