I aim to display interconnected information from various APIs in a cohesive manner

Question

I aim to display interconnected information from various APIs in a cohesive manner

I am working with two APIs:

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

Both sets of data have the same ID, and I aim to display visits (from the first API) and nights (from the second API) side by side in a table: component.html

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

Unfortunately, with my current code, I'm only able to display either nights or visits randomly in each column.

javascript angular typescript api

Answer 1

Answer №1

Incorporate the Promise.all() function to synchronize the responses from both APIs, providing a more efficient solution.

Answer 2

Incorporate the Promise.all() function to synchronize the responses from both APIs, providing a more efficient solution.

Answer 3

Answer №2

Harness the power of rxJS by utilizing forkJoin. This function allows you to combine multiple observables into one.

import { forkJoin } from 'rxjs';

ngOnInit(): void {
  forkJoin({
    countries: this.getQueryCountriesList(),
    nights: this.getQueryNights()
  }).subscribe(({countries, nights}) => {
      this.countryDatas = countries;
      this.nightDatas = nights;
  });

So, what exactly is happening here? Using forkJoin, you ensure that both observables are emitted before combining their data into a single object.

Answer 4

Harness the power of rxJS by utilizing forkJoin. This function allows you to combine multiple observables into one.

import { forkJoin } from 'rxjs';

ngOnInit(): void {
  forkJoin({
    countries: this.getQueryCountriesList(),
    nights: this.getQueryNights()
  }).subscribe(({countries, nights}) => {
      this.countryDatas = countries;
      this.nightDatas = nights;
  });

So, what exactly is happening here? Using forkJoin, you ensure that both observables are emitted before combining their data into a single object.

Answer 5

Answer №3

If you are looking to synchronize the emissions of two observables before processing their values, you can make use of the combineLatest operator from rxjs. This operator will ensure that both observables have emitted at least one value before proceeding to combine those values into an array:

import { combineLatest } from 'rxjs';
 
ngOnInit(): void {
    queryCountriesList$ = this.getQueryCountriesList();
    queryNights$ = this.getQueryNights();
     combineLatest([queryCountriesList$,queryNights$])
    .subscribe(([queryCountriesList, queryNights]) => 
    {
        // process your values here
    }
}

Answer 6

If you are looking to synchronize the emissions of two observables before processing their values, you can make use of the combineLatest operator from rxjs. This operator will ensure that both observables have emitted at least one value before proceeding to combine those values into an array:

import { combineLatest } from 'rxjs';
 
ngOnInit(): void {
    queryCountriesList$ = this.getQueryCountriesList();
    queryNights$ = this.getQueryNights();
     combineLatest([queryCountriesList$,queryNights$])
    .subscribe(([queryCountriesList, queryNights]) => 
    {
        // process your values here
    }
}

Answer 7

Answer №4

Utilize the combineLatest feature from RxJS operators. For more information, you can check out this link

import { combineLatest, of } from 'rxjs';
import { map } from 'rxjs/operators';

const weight = of(70, 72, 76, 79, 75);
const height = of(1.76, 1.77, 1.78);
const bmi = combineLatest([weight, height]).pipe(
  map(([w, h]) => w / (h * h)),
);
bmi.subscribe(x => console.log('BMI is ' + x));

// Output:
// BMI is 24.212293388429753
// BMI is 23.93948099205209
// BMI is 23.671253629592222

For your specific case:

const combined = combineLatest([
  getQueryCountriesList(),
  getQueryNights(),
]).pipe(
  map(([countries, nights]) => {
    // Insert your custom logic to combine objects and remember to return the final value
  })
);
combined.subscribe((x) => console.log("The final result is " + x));

Answer 8

Utilize the combineLatest feature from RxJS operators. For more information, you can check out this link

import { combineLatest, of } from 'rxjs';
import { map } from 'rxjs/operators';

const weight = of(70, 72, 76, 79, 75);
const height = of(1.76, 1.77, 1.78);
const bmi = combineLatest([weight, height]).pipe(
  map(([w, h]) => w / (h * h)),
);
bmi.subscribe(x => console.log('BMI is ' + x));

// Output:
// BMI is 24.212293388429753
// BMI is 23.93948099205209
// BMI is 23.671253629592222

For your specific case:

const combined = combineLatest([
  getQueryCountriesList(),
  getQueryNights(),
]).pipe(
  map(([countries, nights]) => {
    // Insert your custom logic to combine objects and remember to return the final value
  })
);
combined.subscribe((x) => console.log("The final result is " + x));

I aim to display interconnected information from various APIs in a cohesive manner

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the proper way to utilize ngIfElse in Angular 9?

Explaining the process of defining an object type in TypeScript and the conversion from JavaScript

What is the best way to extract a particular key value from a JSON object?

Fade-in loader with centered placement on the full page

Clicking on a radio button can trigger the selection of another radio button

Adjust the viewport width based on the width of the device

AngularJS module is experiencing issues with loading properly

Issue with retrieving JSON objects in Next.js

Encountering an unexpected token error while building an Angular4 --prod project that involves Three

Retrieve the current element when the key is released and send it as a parameter to a different function

Identifying an Object by Clicking with the Mouse in three.js

Error message in node.bcrypt.js: 'No callback function provided; result is undefined.'

Removing double double quotes for Javascript

How to overcome the issue of Vue.js mobile router-link being blocked by v-on:mouseover

Objects That Are Interconnected in Typescript

Having trouble figuring out how to display a tooltip using the show() method in @teamhive/ngx-tooltip?

What is the correct way to effectively share data between components using a service?

Steps to configure npm start for an electron application using "babel-node --presets es2015,stage-3"

Three.js experiences a memory leak issue

Having trouble getting the convert-multiple-files npm package to function properly on an Elastic Beanstalk environment running Amazon Linux