How can I refactor this RXJS / Angular code?

Question

How can I refactor these nested arrays so that I can call something once all of the subscriptions have finished? I am sure it has to do with a combination of pipes, mergeMaps, concatMaps, etc.

this.teams = [
{
    Assignments: [{Id: 0, Name: 'assignment', Notes: 'notes'}]
},
{
    Assignments: [{Id: 0, Name: 'assignment', Notes: 'notes'}]
}]
    this.teams.map((team:any) => {
        team.Assignments.map((a: Assignment) => {
          return this.videoService.getById(a.VideoId).subscribe(
            res => {
              let e = new Event();
              e.Id = a.Id;
              e.title = a.Name;
              e.location = '';
              e.message = a.Notes;
              e.startDate = a.StartDate;
              e.endDate = a.EndDate;
              e.video = res;
              e.team = team.Name;
              this.eventList.push(e);
            },
            err => {

          });
        })
      })

@Makyen sorry about that, added a barebones Array of my data at the top, hope this helps. — Brian B
– Brian B, Commented Jun 1, 2018 at 23:53
Possible duplicate of RxJS Map array to observable and back to plain object in array — Jota.Toledo
– Jota.Toledo, Commented Jun 2, 2018 at 0:33

zhark · Accepted Answer · 2018-06-02 00:44:29Z

2

With lodash:

Observable.from(
    lodash.flatten(
        this.teams.map(team => team.Assignments)
        )
)
.flatMap(a => this.videoService.getById(a.VideoId))
. subscribe(
    res => {
        //handle individual responses
    },
    err => {},
    () => {
        //handle after all complete 
    }
)

answered Jun 2, 2018 at 0:44

zhark

4514 silver badges9 bronze badges

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

1 Comment

J. Pichardo Over a year ago

Simple Implementation, I like it

J. Pichardo · Accepted Answer · 2018-06-02 00:58:54Z

You can't listen on subscriptions, however, you could return an observable for each assignment an do a forkJoin of them, something like:

this.teams.map((team:any) => {
  forkJoin(...team.Assignments.map((a: Assignment) => {
    return this.videoService.getById(a.VideoId).map(
      res => {
        const e = new Event();
        e.Id = a.Id;
        e.title = a.Name;
        e.location = '';
        e.message = a.Notes;
        e.startDate = a.StartDate;
        e.endDate = a.EndDate;
        e.video = res;
        e.team = team.Name;
        this.eventList.push(e);
      });
  })).subscribe(data => {
    // Do something;
  })
})

Now, I would refactor a little that code in order to make it more readable, something like:

function mapToEvent(team, assignment, response) {
  const e = new Event();
  e.Id = assignment.Id;
  e.title = assignment.Name;
  e.location = '';
  e.message = assignment.Notes;
  e.startDate = assignment.StartDate;
  e.endDate = assignment.EndDate;
  e.video = response;
  e.team = team.Name;
  return e;
}

this.teams.map(team => {
  forkJoin(
    ...team.Assignments.map(a =>
      this.videoService
        .getById(a.VideoId)
        .map(res => mapToEvent(team, a, res))
        .do(event => this.events.push(event))
    )
  ).subscribe(data => {
    // Do something;
  });
});

p.s. Some alternative syntax I was thinking on is:

function mapToEvent(team, assignment, response) {
  const obj = {
    Id: assignment.Id,
    title: assignment.Name,
    location: '',
    message: assignment.Notes,
    startDate: assignment.StartDate,
    endDate: assignment.EndDate,
    video: response,
    team: team.Name
  };

  return Object.assign(new Event(), obj);
}

However, I'm not sure how it looks, although this may cause some underlying issues with V8, due to hidden classes.

Based on the other answer

I'm not much a fan of lodash, so I just wanted to present a vanilla js alternative:

Observable.from(
  this.teams
    .map(team => team.Assignments)
    .reduce((acc, a) => [...acc, ...a], [])
)
  .flatMap(a => this.videoService.getById(a.VideoId))
  .catch(err => {
    // Do Something
  })
  .finally(() => {
    // Do something
  })
  .subscribe(res => {
    // Handle Single
  });

Collectives™ on Stack Overflow

How can I refactor this RXJS / Angular code?

2 Answers 2

1 Comment

Based on the other answer

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Based on the other answer

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related