[RxJS] Use groupBy in real RxJS applications

This lesson will show when to apply groupBy in the real world. This RxJS operator is best suited when a source observable represents many data sources, e.g. an observable for multitouch events.

const busObservable = Rx.Observable.of(
  {code: ‘en-us‘, value: ‘-TEST-‘},
  {code: ‘en-us‘, value: ‘hello‘},
  {code: ‘es‘, value: ‘-TEST-‘},
  {code: ‘en-us‘, value: ‘amazing‘},
  {code: ‘pt-br‘, value: ‘-TEST-‘},
  {code: ‘pt-br‘, value: ‘olá‘},
  {code: ‘es‘, value: ‘hola‘},
  {code: ‘es‘, value: ‘mundo‘},
  {code: ‘en-us‘, value: ‘world‘},
  {code: ‘pt-br‘, value: ‘mundo‘},
  {code: ‘es‘, value: ‘asombroso‘},
  {code: ‘pt-br‘, value: ‘maravilhoso‘}
).concatMap(x => Rx.Observable.of(x).delay(500));

const all = busObservable
  .groupBy(obj => obj.code) // 2-d obs
  .mergeMap(innerObs => innerObs.skip(1).map(obj => obj.value));

all.subscribe(x => console.log(x));
/*
"hello"
"amazing"
"olá"
"hola"
"mundo"
"world"
"mundo"
"asombroso"
"maravilhoso"
*/
  • The ‘groupBy‘ return a 2-d observable, can use ‘switchMap‘ or ‘mergeMap‘ to conver to 1-d observable.
时间: 2024-10-25 11:06:04

[RxJS] Use groupBy in real RxJS applications的相关文章

[RxJS] Reactive Programming - Why choose RxJS?

RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a = 4; var b = a * 10; console.log(b); // 40 a = 5; console.log(b); // 40 So you change a, it won't affect b's value because b is already defined.... So

[RxJS] Learn How To Use RxJS 5.5 Beta 2

The main changes is about how you import rxjs opreators from now on. And introduce lettable opreator. import { range } from 'rxjs/observable/range'; import { map, filter, scan } from 'rxjs/operators'; const source$ = range(0, 10); source$.pipe( filte

[RxJS] Reactive Programming - What is RxJS?

First thing need to understand is, Reactive programming is dealing with the event stream. Event streams happens overtime, which not stay in the memory. For example, the array we have: var source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13']; W

[rxjs] Creating An Observable with RxJS

Create an observable var Observable = Rx.Observable; var source = Observable.create(function(observe){ var person = { name: "Zhentian", message: "Hello World!" }; observe.onNext(person); observe.onCompleted(); }); var sub = source.subs

[RxJS] Split an RxJS Observable into groups with groupBy

groupBy() is another RxJS operator to create higher order observables. In this lesson we will learn how groupBy works for routing source values into different groups according to a calculated key. const numbersObservable = Rx.Observable.interval(500)

如何理解 RxJS?RxJS的中文API和使用教程

如何理解 RxJS? 我先附上RxJS的中文教程地址方便大家去了解和使用 中文使用教程:http://rxjs-china.org/_book/ 官方中文文档:https://buctwbzs.gitbooks.io/rxjs/content/ 好啦,我们开始讲一下如何理解它 RxJS 可能对很多人而言是一个从没听说过的新名词,那么 RxJS 到底是什么呢?本文中将予以简要介绍 在 Angular 2 中,我们遇到了一个新的概念 —— RxJS. 对很多人而言,这可能是一个比较难以理解的地方.所

Angular2中的RxJS

RxJS库 RxJS(Reactive Extensions)是个Angular提供的第三方库,实现异步观察模式(asynchronous observable pattern). 启用RxJS操作 RxJS非常大,通常只要我们所需要的特性就好了.Angular在rxjs/Observable模块中提供了简版的Observable,但是它缺乏我们所需要的所有的操作,包括上面提到的map方法. 我们在应用启动时引入所有RxJS操作: import 'rxjs/Rx'; 首先我们观'rxjs/Obs

构建流式应用—RxJS详解

讲之前先说一点哈,插入的图片,不能正常显示,图片一半被遮盖了,如果想看,鼠标右击然后图片地址,图片另存为去看.如果有知道怎么解决的,可以在下面给我评论,我会及时的修改. 好啦,开始: 目录 常规方式实现搜索功能 RxJS · 流 Stream RxJS 实现原理简析 观察者模式 迭代器模式 RxJS 的观察者 + 迭代器模式 RxJS 基础实现 Observable Observer RxJS · Operators Operators ·入门 一系列的 Operators 操作 使用 RxJS

[RxJS] Introduction to RxJS Marble Testing

Marble testing is an expressive way to test observables by utilizing marble diagrams. This lesson will walk you through the syntax and features, preparing you to start writing marble tests today! Grep two files from the rxjs https://github.com/Reacti