Utilizing Observables for data filtration

Question

Utilizing Observables for data filtration

I'm working with an array of objects that I want to filter. I had the idea to use Observables for this task. Can anyone confirm if this approach is correct?

export class MyClass
{
    public item1: string;
    public item2: string;
}

let myArray = MyClass[];

myArray.push({ item1: 'foo1', item2: 'bar1'})
myArray.push({ item1: 'foo2', item2: 'bar2'})

Observable.of(myArray)
    .map(data => data.item1)  
    .subscrite(data => <<here there should be a list of strings here: ['foo1', 'foo2']>>)

Any insights on what might be missing or if this method is recommended?

typescript observable

Answer 1

Answer №1

Using Observable.of(array) will create a stream with one entry containing the entire array. Subsequently, applying map will lead to undefined results and nothing will be emitted.

In contrast, this code snippet generates a stream consisting of two elements:

const o1 = { item1: 'foo1', item2: 'bar1'};
const o2 = { item1: 'foo2',  item2: 'bar2'};
Observable.of(o1, o2)
  .map(data => data.item1)
  .subscribe(data => console.log(data));

A clear demonstration of this concept can be found here: https://plnkr.co/edit/1fqjGwGtUZKv0jDGuOkA

To handle arrays, utilize the spread operator to map the array to multiple arguments like so:

Observable.of(...myArray)
  .map(data => data.item1)
  .subscribe(data => console.log(data));

Answer 2

Using Observable.of(array) will create a stream with one entry containing the entire array. Subsequently, applying map will lead to undefined results and nothing will be emitted.

In contrast, this code snippet generates a stream consisting of two elements:

const o1 = { item1: 'foo1', item2: 'bar1'};
const o2 = { item1: 'foo2',  item2: 'bar2'};
Observable.of(o1, o2)
  .map(data => data.item1)
  .subscribe(data => console.log(data));

A clear demonstration of this concept can be found here: https://plnkr.co/edit/1fqjGwGtUZKv0jDGuOkA

To handle arrays, utilize the spread operator to map the array to multiple arguments like so:

Observable.of(...myArray)
  .map(data => data.item1)
  .subscribe(data => console.log(data));

Utilizing Observables for data filtration

Answer №1

Similar questions

Determining the Type<> of a component based on a string in Angular 2

Creating reusable components in Vue.js can enhance code reusability and make development

methods for extracting JSON key values using an identifier

Middleware fails to execute on routing in Nextjs 13.4 application

I'm looking for some information on Typescript static functions - can anyone help me

React Redux Bundle with Hot Reload Feature

What is the process for type checking a Date in TypeScript?

Automatically deducing types or implementing intricate type validation based on an array

Upon updating AngularFire, an error is thrown stating: "FirebaseError: Expected type 'Ea', but instead received a custom Ta object."

The ngx-image-cropper in Angular only necessitates a button click, making the default cropper unnecessary

Validation errors are returned by express-validator duplicated

When it comes to passing prop values through functions, TypeScript types do not provide suggestions

Challenges in Displaying Components in React with Typescript

Serving sourcemaps for a web extension in Firefox: A step-by-step guide

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Is there a way to transform a complex nested class object into a simple object without losing its methods

Exploring various options for identifying keys

How to Halt or Keep Running a For Loop in Angular 2/4?

Deselecting every row in the px-data-table