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

Scroll up event and sticky header using jQuery

What would be the best way to structure this workflow as a JavaScript data format?

What could be causing the issue of being unable to connect to the NodeJS express server from any network?

Utilize JSON data fetched from a URL to dynamically populate an HTML content

Creating the correct JSON structureHere is how you can format JSON

I need help combining my node project with Angular - how do I do it?

Retrieve type definitions for function parameters from an immutable array containing multiple arrays

Utilizing CakePHP 3.0 with jQuery UI for an autocomplete feature

Encountered an issue in React and Typescript where the argument type is not compatible with the parameter type 'EventListenerOrEventListenerObject'

Is there a way for me to program the back button to navigate to the previous step?

Convert the union into a mapped structure

Variable not accessible in a Typescript forEach loop

jQuery Autocomplete - struggling to pinpoint the exact location where the width of the suggestions div is being defined

Exploring file serving in Node.js with passport authentications

React with Typescript - cannot be expressed as a function

Local environments in Angular do not support file replacement

Is it possible to declare variables using the "this" keyword?

"Looking to swap out URL parameters using JavaScript or jQuery? Here's how you

Building a static website with the help of Express and making use of a public directory

Implementing a secure route in Next.js by utilizing a JWT token obtained from a customized backend system