Combining the MergeMap and Map operators in RxJS using Typescript

Question

Combining the MergeMap and Map operators in RxJS using Typescript

Struggling to grasp the concept of RxJS, I am currently learning and trying to understand this code snippet:

mapOfPeople = new Map<number, any>();

const people = [
  { name: 'Sue', age: 25 },
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 25 },
  { name: 'Sarah', age: 35 }
];

from(people)
  .pipe(
    groupBy(
      person => person.age,
      p => p
    ),
    mergeMap(group => zip(of(group.key), group.pipe(toArray())))
  )
  .subscribe(console.log);

Referencing a tutorial for guidance, I aim to store the output in the specified hashmap. I am puzzled about how to do this effectively. Any suggestions or insights?

javascript typescript rxjs observable

Answer 1

Answer №1

Here's a suggestion for enhancing this code snippet by simply appending a reduce operator:

from(people)
  .pipe(
    groupBy(
      person => person.age,
      p => p
    ),
    mergeMap(group => zip(of(group.key), group.pipe(toArray()))),
    reduce((acc, v) => {
      acc.set(v[0], v[1])
      return acc
    }, new Map<number, any>())
  )
  .subscribe(result => modifiedResults = result);

Answer 2

Here's a suggestion for enhancing this code snippet by simply appending a reduce operator:

from(people)
  .pipe(
    groupBy(
      person => person.age,
      p => p
    ),
    mergeMap(group => zip(of(group.key), group.pipe(toArray()))),
    reduce((acc, v) => {
      acc.set(v[0], v[1])
      return acc
    }, new Map<number, any>())
  )
  .subscribe(result => modifiedResults = result);

Answer 3

Answer №2

I'm having trouble compiling your original code, and I'm not entirely certain of the purpose of the zip component in this particular scenario.

One potential solution is to utilize the subscribe function handler. Currently, it's set to console.log, but you can customize it to any format like (arg) => void (a function that receives an item from the observable and processes it in some manner).

Check out this example below, where we collect an array of individuals based on their age:

type Person = { name: string, age: number};

const mapOfPeople = new Map<number, Person[]>();

const people = [
  { name: 'Sue', age: 25 },
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 25 },
  { name: 'Sarah', age: 35 }
];

from(people).pipe(
  groupBy(person => person.age),
  mergeMap(group => group.pipe(toArray()))
).subscribe(people => {
  // key representing the age of individuals in this group
  const { age } = people[0];

  // assign these individuals to the corresponding age in the map
  mapOfPeople.set(age, people);
});

Answer 4

I'm having trouble compiling your original code, and I'm not entirely certain of the purpose of the zip component in this particular scenario.

One potential solution is to utilize the subscribe function handler. Currently, it's set to console.log, but you can customize it to any format like (arg) => void (a function that receives an item from the observable and processes it in some manner).

Check out this example below, where we collect an array of individuals based on their age:

type Person = { name: string, age: number};

const mapOfPeople = new Map<number, Person[]>();

const people = [
  { name: 'Sue', age: 25 },
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 25 },
  { name: 'Sarah', age: 35 }
];

from(people).pipe(
  groupBy(person => person.age),
  mergeMap(group => group.pipe(toArray()))
).subscribe(people => {
  // key representing the age of individuals in this group
  const { age } = people[0];

  // assign these individuals to the corresponding age in the map
  mapOfPeople.set(age, people);
});

Answer 5

Answer №3

peopleData: any;

const peopleList = [
  { name: 'Sue', age: 25 },
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 25 },
  { name: 'Sarah', age: 35 }
];

from(peopleList)
  .pipe(
    groupBy(
      person => person.age,
      p => p
    ),
    mergeMap(group => zip(of(group.key), group.pipe(toArray())))
  )
  .subscribe(result => peopleData = result /*or process the data as needed*/);

To learn more, visit: observable

Answer 6

peopleData: any;

const peopleList = [
  { name: 'Sue', age: 25 },
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 25 },
  { name: 'Sarah', age: 35 }
];

from(peopleList)
  .pipe(
    groupBy(
      person => person.age,
      p => p
    ),
    mergeMap(group => zip(of(group.key), group.pipe(toArray())))
  )
  .subscribe(result => peopleData = result /*or process the data as needed*/);

To learn more, visit: observable

Combining the MergeMap and Map operators in RxJS using Typescript

Answer №1

Answer №2

Answer №3

Similar questions

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

Dealing with Redis session management in the event of a database disconnection

Mastering the BFCache management in React for optimal performance

Maximize the sum of diverse numbers effectively

Encountering a Difficulty while attempting to Distinguish in Angular

Stop the instantiation of type alias

Executing one controller function from another controller in Typescript

Using ngIf and ngFor in Angular to switch between divs depending on their index values

What is the best way to view an image stored in a database in a separate window?

Selection dropdown not being populated by ng-options

What is the best method to ensure a jQuery function only runs once, even when declared multiple times within a form?

Transforming the output from a processor into an array structure

Struggling to track down the issue in my ts-node express project (Breakpoint being ignored due to generated code not being located)

"Encountering a NodeJS Error when trying to Connect to MongoDB

Successfully executing a JQuery ajax GET request results in receiving truncated data

I encountered an error while working with the angular factories in my project

Is it not the case that using spread syntax does not make a reference to the original array?

Loading excessive amounts of HTML onto a single webpage

Having difficulties with binding 'this' in Angular/Javascript?

Updating Angular 2 template based on specific conditions of model values

Combining the MergeMap and Map operators in RxJS using Typescript

Answer №1

Answer №2

Answer №3

Similar questions

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

Dealing with Redis session management in the event of a database disconnection

Mastering the BFCache management in React for optimal performance

Maximize the sum of diverse numbers effectively

Encountering a Difficulty while attempting to Distinguish in Angular

Stop the instantiation of type alias

Executing one controller function from another controller in Typescript

Using *ngIf and *ngFor in Angular to switch between divs depending on their index values

What is the best way to view an image stored in a database in a separate window?

Selection dropdown not being populated by ng-options

What is the best method to ensure a jQuery function only runs once, even when declared multiple times within a form?

Transforming the output from a processor into an array structure

Struggling to track down the issue in my ts-node express project (Breakpoint being ignored due to generated code not being located)

"Encountering a NodeJS Error when trying to Connect to MongoDB

Successfully executing a JQuery ajax GET request results in receiving truncated data

I encountered an error while working with the angular factories in my project

Is it not the case that using spread syntax does not make a reference to the original array?

Loading excessive amounts of HTML onto a single webpage

Having difficulties with binding 'this' in Angular/Javascript?

Updating Angular 2 template based on specific conditions of model values

Using ngIf and ngFor in Angular to switch between divs depending on their index values