RxJS Refactor nested map statement

Question

I have a service which uses @angular/http to load data from an API. I want to create a projection of the retrieved data for my Components using this data.

Therefore I wrote the following code:

getById(id: string) {
  return this.http
    .get(`https://my-api.io/${id}`)
    .map(response => response.json())
    .map(contracts =>
      contracts.map(contract =>        # <- Nested map
        new Contract(
          contract['id'],
          contract['description']
        )
      )
    );
}

In the 6th line I have a nested map-Statement reducing the readability of my code.

Question

Can I do better? Is there an operator in RxJS which I can use instead of creating this kind of nesting?

Thanks in advance!

If I understand it correctly, there's no way to reduce the complexity here, since the outside map is of Observable and the inside is of Array type. You can consider separate it out to a function for readability though. — Harry Ninh
– Harry Ninh, Commented Oct 21, 2016 at 7:00
Thanks for the quick answer. I think you are right. What I try is to transform a list into a single element that should return a list again. Extracting a method is definetly a good idea. Maybe somebody knows a more elegant way. — Gregor Woiwode
– Gregor Woiwode, Commented Oct 21, 2016 at 7:17
@Gregor Woiwode In this case I think you need convert contracts with concatAll then you can apply .map for each contract, and combineAll Observable sequence. Note: you need return Observable, from .map, in order to use combineAll - jsbin.com/hududiq/edit?js,console — Oleksandr T.
– Oleksandr T., Commented Oct 21, 2016 at 8:07
Hey I really like your approach. - It removes nesting. - There is no need to extract logic into another method. — Gregor Woiwode
– Gregor Woiwode, Commented Oct 21, 2016 at 10:01

Marcel Hoyer · Accepted Answer · 2016-10-21 22:09:32Z

3

I propose to use flatMap/selectMany to flatten your nested array into a new stream of each single array element. In a next step you can then use RxJS.map() to do the actual mapping. Finally collect all mapped array elements with RxJS.toArray()into a new observable that provides a single array event:

const stream = $http('http://jsonplaceholder.typicode.com/posts')
 .map(res => res.data)
 .flatMap(posts => posts)
 .map(post => Object.assign({}, post, { status: false }))
 .toArray();

See sample here: http://jsbin.com/vigizihiwu/1/edit?js,console

But I would also consider: is doing such limbo really necessary? If you only have one subscriber at all, map the received array there:

const stream = $http('http://jsonplaceholder.typicode.com/posts')
 .map(res => res.data);

stream.subscribe(res => {
  const posts = res.map(post => Object.assign({}, post, { status: false }));
  console.log(posts);
});

answered Oct 21, 2016 at 22:09

Marcel Hoyer

2,1482 gold badges13 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gregor Woiwode Over a year ago

Thanks Marcel. I just tried it today using another sample. It turns out that I only missed to map the right property of my json returned by my API. So flatMap is definitly the way to go. And yes you are right I could map the posts inside the subscription. My goal was just to get rid of nested arrow-functions.

Community · Accepted Answer · 2017-05-23 12:32:30Z

2

Thanks to @Alexander T.. In my opinion he proposed a nice way to get around the nested map-Statement: http://jsbin.com/hududiq/1/edit?js,console

Now my code looks like the following:

getByAccountId(id: string) {
  return this.http
    .get(`http://my-api.io/${id}`)
    .map(contractsData => contractsData.json())
    .concatAll()
    .map(contract => Observable.of(new Contract(
                                    contract['id'],
                                    contract['description'])))
    .combineAll();
}

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Oct 21, 2016 at 10:05

Gregor Woiwode

1,1841 gold badge9 silver badges12 bronze badges

2 Comments

pdoherty926 Over a year ago

Could you also use concatMap and do the concatenation and mapping in a single step?

Gregor Woiwode Over a year ago

I did not tried concatMap yet. FlatMap seems to do the thing I need.

martin · Accepted Answer · 2016-10-21 15:43:24Z

2

This seems like tremendously complicated way to do a very simple thing.

If you want to avoid nested map() at all cost (even though these are two completely different methods) you can use just one map() and then forEach() on the array of results:

new Observable.of(testData)
  .map(contractsData => {
    var objects = [];
    JSON.parse(contractsData).forEach(o => objects.push(new Contract(o['id'], o['description'])));
    return objects;
  })
  .subscribe(val => console.log(val));

This will return the same result as your code.

See live demo: http://plnkr.co/edit/NQgRVSCQGgPvTkPPGz7O (I included also your code to prove the results are identical).

I'd personally use two map()s anyway because it's even more simple:

new Observable.of(testData)
  .map(contractsData => JSON.parse(contractsData).map(o => new Contract(o['id'], o['description'])))
  .subscribe(val => console.log(val));

Btw, all operators ending with *all work with higher order Observables (aka Observables emitting other Observables) and I was surprised your code works because you're passing an ordinary array to .concatAll() instead of an Observable. It turned out to be an undocumented feature of .concatAll() thanks to its inner subscriber. According to the documentation this shouldn't work.

answered Oct 21, 2016 at 15:43

martin

97.4k26 gold badges205 silver badges237 bronze badges

1 Comment

Gregor Woiwode Over a year ago

Thanks for your explanation. I was also wondering why concatAll was working. THUMBS_UP

Collectives™ on Stack Overflow

RxJS Refactor nested map statement

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related