我应该使用哪个rxjs运算符从可观察的数组中获取值以根据对象属性进行过滤

Question

I have been racking my brain for a couple of weeks now with this problem. I have typed observable array being returned via an http request. This the array output to the console. I am trying to grab each item and check the properties._hg_layer.

An ngrx state selector is then assigned to Observable and then passed to a BehaviorSubject. This emits the array but won't let me get out the values inside of the array. I have tried every conceivable operator combination. I can't tell if my issue has to do with how the response is typed coming out of the service or how I am using the operators. It will not let me have access to the typed members of the array. IT's as if it doesn't know the properties of the array objects.

I have tried assigning the type of object on the subscription and I can't get that to work either.

Any insight or help you could provide would be greatly appreciated. Thank you very much.

Answer 1

Try this:

this.featureSource.subscribe((features) => {
   // iterate here
   features.map((feature) => console.log(feature.properties));

   // or good ol'
   for (const feature of features) {
      console.log(feature.properties);
   }
})

Also, need to keep in mind that your take(2) will actually emit the features independently , not as an array. If you were to continue to use that, the code snippet above will need to change to process the item (essentially just doing what you would do in a map).

Answer 2

In the end it was getting the order of the mapping correct. I had to map the array in the initial map(). Then map the individual objects on the subscription. I solved my problem with the following:

this.updatedLayers$.pipe(
  map((features: Feature[]) => features),
  )
  .subscribe(val => {
    setTimeout(() => {
      featureSubject.next(val.length);
      this.featureSource.next(val);
      console.log('feature data', val);
      val.map(feature => {
        console.log('type', feature.type);
        console.log('properties', feature.properties._hg_layer);
        });
      }, 500);
    });