Как объединить два массива в один массив, используя Rx Js, где каждый элемент 2-го массива будет назначен первым массивам каждого свойства объекта?

Question

У меня есть два интерфейса, это Team и Company

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

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

Это пример данных:

"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
    }
]

Поэтому я хочу назначить компания как собственность каждой команде на основе companyId . Примерно так:

"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"
       }
    }
]

Итак, как мне этого добиться, используя Rx Js. У меня есть две наблюдаемые, которые возвращают наблюдаемые команды [] и компании [] соответственно.

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

Итак, как это сделать? Я знаю, что это может быть сделано императивным способом (с использованием циклов, если-еще и т. Д. 1020 *), но я хочу сделать это реактивным способом, используя только реактивные операторы, наблюдатели.

Answer 1

Как прокомментировал ShamPooSham , можно использовать оператор forkJoin. Взгляните на следующий фрагмент кода

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);
})

Answer 2

После получения ответа обоих массивов

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

Answer 3

Прежде всего вам нужны объекты команды и компании, чтобы объединить их. так что вы можете сделать это

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);
  })
})

Это должно помочь

Также, если у вас есть обе эти наблюдаемые в разных местах, вы каким-то образом найдете способ заставить оба этих массива объединить его ,

Спасибо