Exploring Child Records with Angular4 and RxJS Observables

Question

Exploring Child Records with Angular4 and RxJS Observables

I am currently in the process of developing a frontend for a blog. My main objective is to retrieve an array of posts from the API, then make additional API calls for each post to fetch the featured image objects and attach them to their respective parent Post objects. Finally, I aim to return the complete array of Post objects. I have encountered challenges in determining the most effective approach using Observables.

This is what I have accomplished thus far:

export class PostService {
private apiAddress: string = '/wp-json/wp/v2/posts';
private logger: Logger;

constructor (private httpService: HttpService, private loggerService: LoggerService) {
    this.logger = loggerService.newLogger('PostService');
}

getPosts(category: Category, page: number = 1, pageSize: number = 10): Observable<Post[]> {
    this.logger.log(`getPosts(id:${category.id}, ${page}, ${pageSize}) returned`);
    return this.httpService.get(`${this.apiAddress}?categories=${category.id}&page=${page}&per_page=${pageSize}&orderby=date&order=desc`).map<Response, Post[]>((res) => {
        let posts:Post[] = [];

        let body = res.json();
        for (var i = 0; i < body.length; i++) {
            posts.push(new Post(body[i]));
        }

        this.logger.log(`getPosts(id:${category.id}, ${page}, ${pageSize}) returned ${posts.length} posts`);
        return posts;
    });
}
}

This is my vision of what I would like to achieve:

export class PostService {
private apiAddress: string = '/wp-json/wp/v2/posts';
private logger: Logger;

constructor (private httpService: HttpService, private loggerService: LoggerService) {
    this.logger = loggerService.newLogger('PostService');
}

getPosts(category: Category, page: number = 1, pageSize: number = 10): Observable<Post[]> {
    this.logger.log(`getPosts(id:${category.id}, ${page}, ${pageSize}) returned`);
    return this.httpService.get(`${this.apiAddress}?categories=${category.id}&page=${page}&per_page=${pageSize}&orderby=date&order=desc`).map<Response, Post[]>((res) => {
        let posts:Post[] = [];

        let body = res.json();
        for (var i = 0; i < body.length; i++) {
            posts.push(new Post(body[i]));
        }

        this.logger.log(`getPosts(id:${category.id}, ${page}, ${pageSize}) returned ${posts.length} posts`);
        return posts;
    }).forEach((post, done) => {
        this.httpService.get(`/wp-json/wp/v2/media/${post.featured_media}`).map<Request, Media>((res) => {
            let body = res.json();
            post.featured_image = new Media(body);
            done(post);
        });
    });
}
}

I recognize that my understanding of Observables may be flawed. Any feedback would be greatly appreciated. Thank you!

angular typescript rxjs observable

Answer 1

Answer №1

To successfully execute the second request, you must first convert the response from the initial request into a stream.

It is not advisable to mix reactive programming with for loops; it is considered bad practice.

Your code should follow this structure:

url = `${this.apiAddress}?categories=${category.id}
        &page=${page}&per_page=${pageSize}
        &orderby=date&order=desc`
mediaUrl = `/wp-json/wp/v2/media/${post.featured_media}`;

getPosts(category: Category, 
         page: number = 1, 
         pageSize: number = 10): Observable<Post[]> {
    return this.httpService.get(url)
      .map(res => res.json())
      .flatMap(posts => Observable.from(posts))
      .map(post => new Post(post))
      .flatMap(post=> 
         this.httpService.get(mediaUrl)
             .map(res=>res.json())
             .map(image=> Object.assign(post, {
                    featured_image: new Media(body) 
                   }) 
              )
      ).toArray();

}

Prior to explaining the code implementation, here's a debugging tip: if uncertain about the operations between two operators, utilize the do function.

...
.map(res => res.json())
.do(data=> console.log(data))
.flatMap(
...

The do function logs data in the console during execution and proceeds accordingly. The step-by-step breakdown of what I'm doing is as follows:

.map(res => res.json())

This line converts the stream containing the response into a stream of JSON data.

.flatMap(posts => Observable.from(posts))

As each stream contains an array, this conversion ensures that each item is processed individually rather than as part of an array.

.map(post => new Post(post))

This step involves converting each raw object into a post object.

.flatMap(post=>

For each object, we make another HTTP call using flatMap, retrieve the response, modify it, then add the modified object back to the stream.

.map(image=> Object.assign(post, {
                featured_image: new Media(body) 
               }) 
          )

Here, we take the media response and update the post object by adding a new parameter, featured_image.

Answer 2

To successfully execute the second request, you must first convert the response from the initial request into a stream.

It is not advisable to mix reactive programming with for loops; it is considered bad practice.

Your code should follow this structure:

url = `${this.apiAddress}?categories=${category.id}
        &page=${page}&per_page=${pageSize}
        &orderby=date&order=desc`
mediaUrl = `/wp-json/wp/v2/media/${post.featured_media}`;

getPosts(category: Category, 
         page: number = 1, 
         pageSize: number = 10): Observable<Post[]> {
    return this.httpService.get(url)
      .map(res => res.json())
      .flatMap(posts => Observable.from(posts))
      .map(post => new Post(post))
      .flatMap(post=> 
         this.httpService.get(mediaUrl)
             .map(res=>res.json())
             .map(image=> Object.assign(post, {
                    featured_image: new Media(body) 
                   }) 
              )
      ).toArray();

}

Prior to explaining the code implementation, here's a debugging tip: if uncertain about the operations between two operators, utilize the do function.

...
.map(res => res.json())
.do(data=> console.log(data))
.flatMap(
...

The do function logs data in the console during execution and proceeds accordingly. The step-by-step breakdown of what I'm doing is as follows:

.map(res => res.json())

This line converts the stream containing the response into a stream of JSON data.

.flatMap(posts => Observable.from(posts))

As each stream contains an array, this conversion ensures that each item is processed individually rather than as part of an array.

.map(post => new Post(post))

This step involves converting each raw object into a post object.

.flatMap(post=>

For each object, we make another HTTP call using flatMap, retrieve the response, modify it, then add the modified object back to the stream.

.map(image=> Object.assign(post, {
                featured_image: new Media(body) 
               }) 
          )

Here, we take the media response and update the post object by adding a new parameter, featured_image.

Answer 3

Answer №2

It appears that you are currently making two separate HTTP requests - one to retrieve posts and another to fetch feature media.

Instead of sending multiple requests, consider modifying your backend to return data in a structured format like this:

postdata : [
  {postid:1, postname:"something else", 
      children:[
            {childid :1, childname:first child item},
            {childid :2, childname:second child item}
          ]
    },  //this is a post with children items in it

  {postid :2, postname: "numbsertwo",
         children:[
                   ...return like in the above
                 ]

      }

If you follow this approach, you can easily iterate through the data using the following method:

 return this.httpService.get(`$urltoget`).map<Response, Post[]>((res) => {
    let posts:Post[] = [];

    let body = res.json();
    for (var i = 0; i < body.length; i++) {
        posts.push(new Post(body[i]));

       //here loop through the children

    }

    return posts;
})

Answer 4

It appears that you are currently making two separate HTTP requests - one to retrieve posts and another to fetch feature media.

Instead of sending multiple requests, consider modifying your backend to return data in a structured format like this:

postdata : [
  {postid:1, postname:"something else", 
      children:[
            {childid :1, childname:first child item},
            {childid :2, childname:second child item}
          ]
    },  //this is a post with children items in it

  {postid :2, postname: "numbsertwo",
         children:[
                   ...return like in the above
                 ]

      }

If you follow this approach, you can easily iterate through the data using the following method:

 return this.httpService.get(`$urltoget`).map<Response, Post[]>((res) => {
    let posts:Post[] = [];

    let body = res.json();
    for (var i = 0; i < body.length; i++) {
        posts.push(new Post(body[i]));

       //here loop through the children

    }

    return posts;
})

Answer 5

Answer №3

I would go about it like this

fetchPosts(category: Category, pageNumber: number = 1, itemsPerPage: number = 10) {
    this.logger.log(`Fetching posts for category ID:${category.id}, page:${pageNumber}, pageSize:${itemsPerPage}`);
    return this.httpService.get(`${this.apiAddress}?categories=${category.id}&page=${pageNumber}&per_page=${itemsPerPage}&orderby=date&order=desc`).map((res) => {
        let posts:Post[] = [];

        let responseBody = res.json();
        for (var index = 0; index < body.length; index++) {
            posts.push(new Post(body[index]));
        }

        this.logger.log(`Fetched ${posts.length} posts for category ID:${category.id}, page:${pageNumber}, pageSize:${itemsPerPage}`);
        return posts;
    }).
    switchMap(posts => {
        const imageRequests = new Array<Observable>();
        forEach(post => {
            imageRequests.push(this.httpService.get(`/wp-json/wp/v2/media/${post.featured_media}`).map(res => {
                   let responseBody = res.json();
                   post.featured_image = new Media(responseBody);
                }
             ));
        })
        return Observable.combineLatest(imageRequests).map(() => posts);
    })
}

The approach involves initiating an initial http request to fetch the posts and then creating an array of additional http requests, one for each Post, in order to retrieve their respective images. Each http request is represented as an Observable, forming an Array of Observables.

You can merge an Array of Observables into a single Observable that emits only when all Observables have emitted using the combineLatest operator.

The final map operator ensures that the subscriber receives the array of Posts generated from the initial http call.

Answer 6

I would go about it like this

fetchPosts(category: Category, pageNumber: number = 1, itemsPerPage: number = 10) {
    this.logger.log(`Fetching posts for category ID:${category.id}, page:${pageNumber}, pageSize:${itemsPerPage}`);
    return this.httpService.get(`${this.apiAddress}?categories=${category.id}&page=${pageNumber}&per_page=${itemsPerPage}&orderby=date&order=desc`).map((res) => {
        let posts:Post[] = [];

        let responseBody = res.json();
        for (var index = 0; index < body.length; index++) {
            posts.push(new Post(body[index]));
        }

        this.logger.log(`Fetched ${posts.length} posts for category ID:${category.id}, page:${pageNumber}, pageSize:${itemsPerPage}`);
        return posts;
    }).
    switchMap(posts => {
        const imageRequests = new Array<Observable>();
        forEach(post => {
            imageRequests.push(this.httpService.get(`/wp-json/wp/v2/media/${post.featured_media}`).map(res => {
                   let responseBody = res.json();
                   post.featured_image = new Media(responseBody);
                }
             ));
        })
        return Observable.combineLatest(imageRequests).map(() => posts);
    })
}

The approach involves initiating an initial http request to fetch the posts and then creating an array of additional http requests, one for each Post, in order to retrieve their respective images. Each http request is represented as an Observable, forming an Array of Observables.

You can merge an Array of Observables into a single Observable that emits only when all Observables have emitted using the combineLatest operator.

The final map operator ensures that the subscriber receives the array of Posts generated from the initial http call.

Exploring Child Records with Angular4 and RxJS Observables

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Adjust the color of the entire modal

The type 'Promise<any>' cannot be assigned to the type 'Contact[]'

JavaScript - Imported function yields varied outcome from module

What is the process for modifying href generation in UI-Router for Angular 2?

Error in Typescript cloud function: response object is not callable

Error encountered when trying to access Proxy Object or Object[] in MobX with TypeScript

Organizing JSON keys based on their values using Typescript

Oops! ExcelJs is throwing an error: "Unable to merge cells that are already

Using static typing in Visual Studio for Angular HTML

Attaching an event listener to elements with a specified Class name

What steps can I take to avoid encountering the `@typescript-eslint/unbound-method` error while utilizing the `useFormikContent()` function?

Troubleshooting spacing problems in Angular Material tables

Maintaining Component State with ngIf in Angular 2

Uncaught Error: Unable to access 'visit' property of null

Include a checkbox within a cell of a table while utilizing ngFor to iterate through a two-dimensional array

What is the best way to link a specific version of the @types package to its corresponding JavaScript package version?

Issue encountered in Angular 16: angular-slickgrid is reporting that property 'detail' is not found on type 'Event'

(Angular4 / MEAN) Making a Request to Local API Yields an Empty Response Body

The constant value being brought in from an internal npm package cannot be determined