I have two APIs, its data have similar ids and different values. data is like this:

nights =

{
    yearNo: 2014,
    monthNo: 7,
    countryId: 6162,
    countryNameGe: "რუსეთის ფედერაცია",
    gender: 1,
    ageGroup: 2,
    nights: 26124560
},

visits =

{
    yearNo: 2020,
    monthNo: 10,
    countryId: 5967,
    countryNameGe: "აზერბაიჯანი",
    tourType: 1,
    gender: 1,
    ageGroup: 1,
    value: 7502768
},

I want to show related data (when countryIds are same) next to each other in table(html)

this is my component.ts

ngOnInit(): void {
       this.getQueryCountriesList().subscribe(arg => {
         this.countryDatas = arg;
       });
       this.getQueryNights().subscribe(obj => {
        this.nightDatas = obj;
      });
........
......
  getQueryCountriesList(){
    return this.http.get<any>(this.APIUrl   "/Visitor?tourType="  this.tourType  "&year="   this.selectedYear   "&month="   this.selectedMonth  "&gender="   this.selectedGender   "&age=" this.selectedAge);
  }
  getQueryNights(){
    return this.http.get<any>(this.APIUrl   "/Nights?tourType="  this.tourType  "&year="   this.selectedYear   "&month="   this.selectedMonth  "&gender="   this.selectedGender   "&age=" this.selectedAge);
  }

firstly I tried this way, but I get this wont work:

<tr *ngFor="let country of countryDatas; let nights; of: nightDatas">
    <th [id]="country.countryId   '1'">{{ country.countryNameGe }}</th>
    <td [id]="country.countryId   '2'">{{ country.value }}</td>
    <td [id]="country.countryId   '3'">{{ nights.value }}</td>
</tr>

Then I tried following:

const resulti = this.countryDatas.map((obj:any) => ({
    ...obj,
    ...this.nightDatas.find((o:any) => o.countryId === obj.countryId),
  }));

but it return empty array.

what can I do in this situation?

CodePudding user response：

Merge two data object inside subscribe.

forkJoin will emit data when a response has been received for all

ngOnInit() {
    forkJoin({
      countriesList: this.getQueryCountriesList(),
      nights: this.getQueryNights()
    })
    .subscribe(({countriesList, nights}) => {
      resulti = countriesList.map((obj:any) => ({
           ...obj,
           ...nights.find((o:any) => o.countryId === obj.countryId),
      }));
    });
  }

CodePudding user response：

Simply do this:

this.countryDatas.forEach((object:any)=>{
 if (object.id === this.nightDatas.id){
    this.similarDatas = object
 }
}

then on your HTML file, just do this:

<th [id]="country.countryId   '1'">{{ similarDatas.countryNameGe }}</th>
    <td [id]="country.countryId   '2'">{{ similarDatas.value }}</td>
    <td [id]="country.countryId   '3'">{{ similarDatas.value }}</td>