How to combine two arrays into a single array using RxJs where 2nd array's each element will be assigned to first arrays each object property?

Question

I have two interfaces, they are Team and Company

public interface Team {
  id: number;
  name: string;
  companyId: number;
}

public interface Company {
  id: number;
  name: string;
}

This is the sample data:

"companies": [
    {
      "id": 3,
      "name": "XSoftware",
      "location": "Nagar"
    },
    {
      "id": 5,
      "name": "Google",
      "location": "Seattle"
    },
    {
      "id": 7,
      "name": "YS",
      "location": "Dhanmondi"
    },
    {
      "id": 8,
      "name": "Amazon",
      "location": "Seattle DC"
    },
    {
      "name": "ToTD",
      "location": "Pink City",
      "id": 10
    }
]

"teams": [
    {
      "id": 1,
      "name": "Team X",
      "expertise": "Java",
      "companyId": 3
    },
    {
      "id": 2,
      "name": "Team Y",
      "expertise": "Angular",
      "companyId": 3
    },
    {
      "id": 3,
      "name": "Team Z",
      "expertise": "Spring Boot",
      "companyId": 8
    },
    {
      "id": 4,
      "name": "Team M",
      "expertise": "Node Js",
      "companyId": 5
    }
]

So I want to assign company as property to each team based on companyId. Like this:

"teams": [
    {
      "id": 1,
      "name": "Team X",
      "expertise": "Java",
      "companyId": 3,
      "company": {
         "id": 3,
          "name": "XSoftware",
          "location": "Nagar"
       }
    },
    {
      "id": 2,
      "name": "Team Y",
      "expertise": "Angular",
      "companyId": 3,
      "company": {
         "id": 3,
          "name": "XSoftware",
          "location": "Nagar"
       }
    },
    {
      "id": 3,
      "name": "Team Z",
      "expertise": "Spring Boot",
      "companyId": 8,
      "company": {
         "id": 8,
         "name": "Amazon",
         "location": "Seattle DC"
       }
    },
    {
      "id": 4,
      "name": "Team M",
      "expertise": "Node Js",
      "companyId": 5,
      "company": {
         "id": 5,
         "name": "Google",
         "location": "Seattle"
       }
    }
]

So how can I achieve this using RxJs. I have two observables that return Observable of Team[] and Company[] respectively.

const teams$: Observable<Team[]> = this.httpClient.get<Team[]>('/teams');
const companies$: Observable<Company[]> = this.httpClient.get<Company[]>('/companies');

So, How to do this? I know it can be done in imperative way (by using loops, if-else etc), but I want to do this in reactive way by only using reactive operators, observers.

I don't think there's a point in doing it "the rxjs way" since you're getting your responses as one emitted array per request, not as streams. I'd just do a `forkJoin` of the two observables and then do all that imperative stuff (or I'd do it in a more functional way) — ShamPooSham, Apr 14 '20 at 05:48

score 2 · Accepted Answer · answered Apr 14 '20 at 05:51

As ShamPooSham commented one way is to use a forkJoin operator. Take a look at the following snippet of code

const teams$ = this.httpClient.get<Team[]>('/teams');
const companies$ = this.httpClient.get<Company[]>('/companies');

const teamsWithCompanies = forkJoin(teams$, companies$).pipe(
  switchMap((values: any[]) => {
    const teamsWithCompaniesResponse: TeamWithCompany[] = [];
    const teamArray = values[0];
    teamArray.forEach((team) => {
      const teamWithCompany: TeamWithCompany = {
          id: team.id,
          name: team.name,
          expertise: team.expertise,
          companyId: team.companyId,
          company: values[1].find(c => c.id === team.companyId)
      }
      teamsWithCompaniesResponse.push(teamWithCompany);
    })

    return of(teamsWithCompaniesResponse);
  })
).subscribe(response => {
  console.log('[RESPONSE]', response);
})

it works, but can I use zip operator? Just to know. ForkJoin does the job for me. Thanks — Chinmoy Acharjee, Apr 18 '20 at 15:13

score 1 · Answer 2 · answered Apr 14 '20 at 05:58

1

After getting both array response

let arr3 = this.teams.map((item, i) => Object.assign({}, item, { company: (this.companies.find((itmInner) => itmInner.id === this.teams[i].companyId)) }));
    console.log(arr3);

answered Apr 14 '20 at 05:58

Neha Shah

1,147
6
14

score -1 · Answer 3 · answered Apr 14 '20 at 05:53

First and foremost you need both the team and company objects to merge them. so what you can do is

this.httpClient.get<Team[]>('/teams').subscribe(teams => {
  this.httpClient.get<Company[]>('/companies').subscribe(companies => {
    //here you have teams and companies array
    var result = [];

    teams.forEach(team => {
      var company = companies.find(s => s.id == team.companyId);
      if(company){
      Object.assign(team , {company});
      result.push(team);
      }
    })

    console.log(result);
  })
})

This should do the trick

Also if you have both these observables at different places you will somehow find a way to get both these array to merge it.

Thank you

Doing subscriptions inside subscriptions is bad practice and will be less performant. With your code, you need to get `/teams` before you get `/companies`, which could be done in parallel. — ShamPooSham, Apr 14 '20 at 06:02

How to combine two arrays into a single array using RxJs where 2nd array's each element will be assigned to first arrays each object property?

3 Answers3