I am facing a scenario where I have two APIs with data containing similar ids but different values. The structure of the data is as follows:
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
},
My goal is to display related data (based on matching countryIds) side by side in an HTML table.
This is how I am approaching it in my component.ts file:
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);
}
Initially, I attempted the following approach, but encountered issues:
<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>
Subsequently, I tried the following alternative:
const resulti = this.countryDatas.map((obj:any) => ({
...obj,
...this.nightDatas.find((o:any) => o.countryId === obj.countryId),
}));
However, this resulted in an empty array being returned. What would be the best approach in this situation?