Applying a property to each element in several arrays, then returning a flat map with one array

Question

I have a collection that looks like this

[
  {
    count: 123,
    description: 'some description',
    articles: [
     {...}
    ]
  },
  {
    count: 234,
    description: 'some description',
    articles: [
      {...}
    ]
  }
]

Each object in the collection has a collection of articles. What I need is to apply the description to each article object in the respective collection in each element of the primary collection. I also want to end up with a flat array containing only articles. Clearly I'm using mergeMap incorrectly, but I'm not sure how to do it.

I have tried this

json$.pipe(
    // Filter out empty arrays
    filter(section => section.count > 0),
    // Apply the descriptions 
    map(section => section.articles.map(a => (Object.assign(a, section.sectionName)))),
    mergeMap(x => x.articles)
).subscribe(x => console.log(x));

But the articles do not have the description property in them, and it's not a flat array of articles. I've tried a few things but I'm unsure how to proceed

What do you mean by "apply the description to each article object"? — martin
– martin, Commented May 18, 2018 at 7:13
I meant that I wanted to apply the description property to each article object in the articles array. Like articles.map(a => ({...a, description}). Yoshi has supplied a solution that takes of it — Norsk
– Norsk, Commented May 19, 2018 at 4:30

Yoshi · Accepted Answer · 2018-05-18 08:51:34Z

You only need to concatMap the outer observable, after adjusting each article.

const { Observable } = Rx;
const { map, concatMap, filter } = Rx.operators;

const json$ = Observable.from([
  {
    count: 123,
    description: 'some description 123',
    articles: [
      {id: 1},
      {id: 2},
    ]
  },
  {
    count: 234,
    description: 'some description 234',
    articles: [
      {id: 3},
      {id: 4},
    ]
  }
]);

const withDescription$ = json$.pipe(
  filter(({count}) => count > 0),
  concatMap(
    ({articles, description}) => Observable.from(articles).map(a => ({...a, description}))
  )
);

withDescription$.subscribe(console.log);

<script src="https://unpkg.com/@reactivex/rxjs@^5/dist/global/Rx.min.js"></script>

If you don't need any special behavior on the inner observable, you could simplify to:

const withDescription$ = json$.pipe(
  filter(({count}) => count > 0),
  concatMap(
    ({articles, description}) => articles.map(a => ({...a, description}))
  ),
);

Collectives™ on Stack Overflow

Applying a property to each element in several arrays, then returning a flat map with one array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related