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