Managing multiple HTTP requests in Ionic

Question

Managing multiple HTTP requests in Ionic

I am having an issue with my http requests where I only receive the data from the first request and not all of them. Can anyone help me with this problem?

Thank you in advance for your assistance.

Here is my function:

async asyncCall() {
    return await this.subscription.push(forkJoin([this.http.get("https://pixabay.com/api/?key=15006679-5b02255bc032741ef0&q=phone wallpaper&per_page=200&min_height=200"),
            this.http.get("https://pixabay.com/api/?key=15006679-5b02255bc032741ef0&q=dog&per_page=200&min_height=200`"),
            this.http.get("https://pixabay.com/api/?key=15006679-5b02255bc032741ef0&q=cat&per_page=200&min_height=200`")
        ])
        .subscribe((data: any) => {

            // console.log("dtdtdt", data.map(e => console.log("e", e)))
            // console.log(data.length)
            for (let i = 0; i < data.length; i++) {
                return this.images = data[i].hits;
            }
        }))
}

This is how I'm displaying the images in my HTML:

<div [ngSwitch]="galleryType">
    <div class="images" *ngSwitchCase="'pinterest'">
      <div class="one-image" *ngFor="let image of images, let i = index"  tappable (click)="presentModal(i)">
        <img src={{image.webformatURL}}>
      </div>
    </div>
  </div>

angular typescript ionic-framework

Answer 1

Answer №1

One issue arises when you use the return statement within your loop, and don't forget to fix the typo pointed out by @cabesuon.

A better approach is to add the hits to your images array like this:

this.images = [];

for (let i = 0; i < data.length; i++) {
    this.images.concat(data[i].hits);
}

return this.images;

Answer 2

One issue arises when you use the return statement within your loop, and don't forget to fix the typo pointed out by @cabesuon.

A better approach is to add the hits to your images array like this:

this.images = [];

for (let i = 0; i < data.length; i++) {
    this.images.concat(data[i].hits);
}

return this.images;

Managing multiple HTTP requests in Ionic

Answer №1

Similar questions

Having trouble with obtaining real-time text translation using ngx translate/core in Angular 2 with Typescript

Re-evaluating information when the query parameter is modified?

A step-by-step guide on uploading images to Firebase using Ionic 4

Please anticipate the reply from the AngularJS 2 API

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

How can I retrieve a targeted set of information from Firebase Realtime Database?

Weekday Filter in Angular 2

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Creating a structure within a stencil web component

What are the steps to effectively implement the useEffect hook in React?

What is the best way to target all select2 elements with a single button click?

The TypeScript compiler is unable to locate the module react-scripts within the lerna webpack configuration

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Refresh child route independently without relying on data from parent route

The unpredictable behavior of the `this` keyword while troubleshooting a TypeScript program in VS code

What methods are most effective for transferring data into Excel?

Are there problems with the response values of functions that can handle varying object interfaces?

Encountering difficulties when transferring Angular2 example from Plnkr to a live application

Navigating json data in angular 6

Passing an array of ID's between two components in Angular: A comprehensive guide