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()); const all = busObservable
.groupBy(obj => obj.code) // 2-d obs
.mergeMap(innerObs => innerObs.skip().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.

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

  1. [RxJS + AngularJS] Sync Requests with RxJS and Angular

    When you implement a search bar, the user can make several different queries in a row. With a Promis ...

  2. [RxJS] Refactoring Composable Streams in RxJS, switchMap()

    Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstr ...

  3. [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. [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 ...

  5. [rxjs] Creating An Observable with RxJS

    Create an observable var Observable = Rx.Observable; var source = Observable.create(function(observe ...

  6. [RxJS] Reactive Programming - What is RxJS?

    First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...

  7. [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 ...

  8. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  9. rxjs的世界

    rxjs学习了几个月了,看了大量的东西,在理解Observable的本文借鉴的是渔夫的故事,原文,知识的主线以<深入浅出rxjs>为主,动图借鉴了rxjs中文社区翻译的文章和国外的一个动图 ...

随机推荐

  1. BZOJ5137: [Usaco2017 Dec]Standing Out from the Herd(广义后缀自动机,Parent树)

    Description Just like humans, cows often appreciate feeling they are unique in some way. Since Farme ...

  2. 洛谷 P2616 [USACO10JAN]购买饲料II Buying Feed, II

    洛谷 P2616 [USACO10JAN]购买饲料II Buying Feed, II https://www.luogu.org/problemnew/show/P2616 题目描述 Farmer ...

  3. ubuntu-软件解压方法(转载)

    一下内容转载自 http://blog.csdn.net/zad522/article/details/2770446 今天用到了ubuntu解压,所以就在网上查找了下方法.自己菜鸟一枚,收录别人的文 ...

  4. h.264硬件解码

    // H264HWDecoder.m // H264EncoderDecoder // // Created by lujunjie on 2016/11/28. // Copyright © 201 ...

  5. 需求:在浏览器加载完毕后,自动播放视频:出现play() failed because the user didn't interact with the document first.错误

    解决方法:给video标签加入<video muted></video> 静音即可. Chrome 66为了避免标签产生随机噪音. 参考链接:https://juejin.im ...

  6. web前端背景介绍

    Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs等等: 基本 ...

  7. Excel数据比对-批量数据比对

    1.导出现场的Excel收费规则2.有专门的代码写的测试收费规则的工具(开发自己开发的)3.在这个工具上选择,导出的收费规则Excel,点击导出按钮(导出按钮里面有计算每一列的计费结果4.Excel里 ...

  8. Docker---(6)问题:bash: vi: command not found

    原文:Docker---(6)问题:bash: vi: command not found 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://bl ...

  9. Emgucv 图像操作笔记

    这里记下一些学习过程中的心得和技巧.我用VS2008,C#的平台进行编写. 1.将图片载入PictureBox的方法: Image<Bgr, byte> img = new Image&l ...

  10. amazeui学习笔记--css(常用组件9)--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...