Iterate and combine a list of HTTP observables using Typescript

Question

Iterate and combine a list of HTTP observables using Typescript

I have a collection of properties that need to be included in a larger mergeMap operation.

this.customFeedsService.postNewSocialMediaFeed(this.newFeed)
            .mergeMap( newFeed => this.customFeedsService.postFeedProperties( newFeed.Id, this.feedProps))
            .mergeMap(newProps => this.customFeedsService.preloadSocialMediaFeed(newProps.FeedId))
            .subscribe(data => console.log(data), err => console.log);

Within my service, I iterate through the properties to generate a single Observable that feeds into the mergeMap process.

public postFeedProperties( feedId: number, props: FeedPropertyApi[] ): Observable<any> {
    let observeGroup = new Observable<any>();
    for(let prop of props){
        prop.FeedId = feedId;
        observeGroup.concat(this.apiService.postData(this.feedPropertyApiUrl, prop, true)
            .map(res => res.json()));
    }

    return observeGroup
    // return this.apiService.postData(this.feedPropertyApiUrl, props[0], true)
    //          .map(res => res.json()).concat(this.apiService.postData(this.feedPropertyApiUrl, props[1],true)
    //          .map(res => res.json())).concat(this.apiService.postData(this.feedPropertyApiUrl, props[2], true)
    //          .map(res => res.json()));
}

While the commented code works perfectly fine, I encounter a

Cannot read property 'subscribe' of undefined

error when running the loop. What could possibly be causing this issue within the loop?

angular loops typescript rxjs observable

Answer 1

Answer №1

Have you experimented with replacing 'of' with 'as' in your for loop statement?

for(let prop as props) {...}

If the issue persists, can you provide additional details on where the code is encountering errors and whether it occurs during the initial iteration?

Answer 2

Have you experimented with replacing 'of' with 'as' in your for loop statement?

for(let prop as props) {...}

If the issue persists, can you provide additional details on where the code is encountering errors and whether it occurs during the initial iteration?

Answer 3

Answer №2

Shoutout to Eliseo for providing the solution. This is how I integrated the code into my project.

let groupToObserve: Observable<any>[] = [];
    for(let property of properties){
        property.FeedId = feedIdentifier;
        groupToObserve.push(this.apiService.postData(this.feedPropertyApiUrl, 
        property, true)
            .map(response => response.json()));
    }
return Observable.forkJoin(groupToObserve).map(result => result);

Answer 4

Shoutout to Eliseo for providing the solution. This is how I integrated the code into my project.

let groupToObserve: Observable<any>[] = [];
    for(let property of properties){
        property.FeedId = feedIdentifier;
        groupToObserve.push(this.apiService.postData(this.feedPropertyApiUrl, 
        property, true)
            .map(response => response.json()));
    }
return Observable.forkJoin(groupToObserve).map(result => result);

Iterate and combine a list of HTTP observables using Typescript

Answer №1

Answer №2

Similar questions

Ways to ensure TypeScript shows an error when trying to access an array index

shifting the angular directives to alternate the bootstrap class of hyperlinks

What impact do Angular Signals have on RXJS Observables and how does this influence change detection within the framework?

Issues with hydrating React local storage hook in custom implementation within NextJS

Can we define the input and return types for functions using httpsCallables?

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

Built-in Handlebars helper for nested iteration - no results displayed

Error encountered while running npm build: Typescript issue within plotly.js/index.d.ts

Error Uncovered: Ionic 2 Singleton Service Experiencing Issues

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

Encountered error message: "Cannot assign argument of type '() => () => boolean' to parameter of type 'EffectCallback'"

Ensure that all items retrieved from the mongoDB query have been fully processed before proceeding further

Essential front-end tools for enhancing Angular 2 projects

Always deemed non-assignable but still recognized as a universal type?

Angular ngx-translate Feature Module failing to inherit translations from Parent Module

Arranging Angular Cards alphabetically by First Name and Last Name

Encountering a 404 error when trying to deploy an Angular application

typescript Can you explain the significance of square brackets in an interface?

What is an alternative way to confirm the invocation of a service method in Jasmine unit testing for Angular without relying on spyOn?