#Display data for select option using Observable

31 messages · Page 1 of 1 (latest)

mighty sparrow
#

I have this service to get all filters of all the dropdown components .

in my ts file I initialized an observable and assigned the value from the result coming from the service.


this.filterList = this.filterService.getFilter(Param)```

in my html

```<options *ngFor="let data of filterList | async" [value]="data.ddvalue">{{data.ddtxt}}</options>```

I will get an empty data. The filterlist if I will subscribe to it, I have a result of an array of objects like : FilterOne[]; FilterTwo[];FilterThree[] and so on.
what I want is I want to get the data from FilterOne[] only. 
How can I get the FilterOne[]?
vestal shoal
#

Without code your explanation is not so clear.
First thing I can suggest is

this.filterList = 
  this.filterService.getFilter(Param).pipe(
    map(filters => filters[0])
  )

Btw, your design sounds brittle.

mighty sparrow
#

This is the code in my ts file to call the service

filterList !: Observable<Filter>;

  ngOnInit(): void {
  this.GetFilter()
}


GetFilter(){
    this.filterList = this.filterService.getFilter(this.clientFilterParam) 

}```
That filterList will have an array of objects. 

this is my interface

export interface Filter{
FilterOne: UserList[];
FilterTwo: ManagerList[];
}

export interface UserList{
ddvalue: string
ddtext: string
}
export interface ManagerList{
ddvalue: string
ddtext: string
}

in my html this is my code using select component
```<option *ngFor="let data of filterList.FilterOne | async" [value]="data.ddvalue">{{data.ddtext}}</option>

how can I get the data of filterone using this observable? am I doing it right?

#

@vestal shoal

vestal shoal
#

Did you try what I suggested?

#

And btw, your interfaces don't match with the description of the payload earlier you said you're getting.

mighty sparrow
#

yes but got an error it says property 0 does not exist

vestal shoal
#

Then, you're not getting an array of objects as you stated in your orginal message.

mighty sparrow
vestal shoal
#

Your Filter interface is not an array

mighty sparrow
#

[]

#

yes that's correct

#

I want the values of Filterone

#

which is inside that filter

#

object

vestal shoal
#

And you defined your Observable as emitting Filter

mighty sparrow
#

oh. what's the correct one? I don't know if I did it right

vestal shoal
#

Only you know what your API will return for that endpoint.

#

Try this

this.filterList = 
  this.filterService.getFilter(Param).pipe(
    map(filters => filters.FilterOne)
  )
mighty sparrow
#

yes the return looks like this
{
"filterone": [ ],
"filtertwo":[]
....
}

vestal shoal
#

That's not an array.
It's an object.
Try my last suggestion.

mighty sparrow
#

oh ok thanks will let you know

#

should I change Observable<>?

vestal shoal
#

No.

mighty sparrow
#

got an error on the this.filterList => type Observable<FilterOne[]> is not assignable to Observable<Filter>

vestal shoal
#

You're right. My bad.
Since I think in your template you'll need tho other filter too, change back the obs assignment

GetFilter(){
    this.filterList = this.filterService.getFilter(this.clientFilterParam) 
}

~~and modify your template like this

<option *ngFor="let data of filterList | async as filters" 
  [value]="filters.data.ddvalue">{{filters.data.ddtext}}</option>
```~~
mighty sparrow
#

ok I will try thanks

vestal shoal
#

@mighty sparrow
I just casually re-read your interfaces, and noticed this approach is wrong from the basis.

<ng-container *ngIf="filterList | async as filters">
  <option *ngFor="let data of filters.FilterOne" 
    [value]="data.ddvalue">{{data.ddtext}}</option>
</ng-container>
#

I really suggest to rethink your properties naming, because at the moment is really confusing.

mighty sparrow
#

may I know why there is a ngIf?

#

oh I see I get it now