RxJs - What is the best approach for generating an array of Observables within an Observable?

Question

RxJs - What is the best approach for generating an array of Observables within an Observable?

Attempting to understand the correct approach in RxJs, as I am relatively new to it. My goal is to create an Observable array of Observables.

I aim to fetch a list of User's Posts with each Post being an Observable. These individual Post Observables should be stored in an Observable array so that any changes to the array can notify the calling code and update all subscriptions related to the post "list". While this task seems straightforward, I also require each Post to itself be an Observable for subscribing to individual objects like posts[i]. What would be the best practice to achieve this?

My current setup involves Angular 9:

public getPosts(): Observable<Array<Post>> {
    return new Promise((resolve, reject) = {
        let posts: Observable<Array<Post>> = new Observable<Array<Post>>();
        this.get<Array<Post>>('posts').subscribe(r => {
            posts = from(r);
            return resolve(posts);
        });
    });
}

This code provides an

Observable<Array<Post>>

, but how can I generate an

Observable<Array<Observable<Post>>>

? Is this considered an anti-pattern?

javascript rxjs observable publish-subscribe

Answer 1

Answer №1

The key factor here is convenience - if your server provides you with detailed updates on post changes, then feel free to create an

Observable<Observable<Post>[]>

.

However, in your specific case, there seem to be some issues. Mixing Observables with Promises is not ideal. The method getPosts will only fetch the first post obtained from the API.

While this code snippet offers a potential solution, it may not align precisely with your original intentions...

public getPosts(): Observable<Array<Observable<Post>>> {
  return this.get('posts').pipe(
    switchMap(posts => combineLatest(
      posts.map(post => this.get('post', post.id))
    )),
  );
}

Answer 2

The key factor here is convenience - if your server provides you with detailed updates on post changes, then feel free to create an

Observable<Observable<Post>[]>

.

However, in your specific case, there seem to be some issues. Mixing Observables with Promises is not ideal. The method getPosts will only fetch the first post obtained from the API.

While this code snippet offers a potential solution, it may not align precisely with your original intentions...

public getPosts(): Observable<Array<Observable<Post>>> {
  return this.get('posts').pipe(
    switchMap(posts => combineLatest(
      posts.map(post => this.get('post', post.id))
    )),
  );
}

Answer 3

Answer №2

There seems to be some confusion about the goal here, but perhaps a solution closer to this would work better:

@Injectable({providedIn:'root'})
export class PostService {
  // private replay subject will cache one value
  private postSource = new ReplaySubject<Post[]>(1)
  // public list of posts observable
  posts$ = this.postSource.asObservable();
  // function to select item by id out of list
  post$ = (id) => this.posts$.pipe(map(posts => posts.find(p => p.id === id)))

  getPosts() {
    // function to retrieve remote posts
    return this.get<Post[]>('posts');
  }

  loadPosts() {
    // function to fetch posts and update the subject value
    this.getPosts().subscribe(posts => this.postSource.next(posts));
  }
}

You will need to define the get function and call loadPosts whenever you need to refresh the list.

Answer 4

There seems to be some confusion about the goal here, but perhaps a solution closer to this would work better:

@Injectable({providedIn:'root'})
export class PostService {
  // private replay subject will cache one value
  private postSource = new ReplaySubject<Post[]>(1)
  // public list of posts observable
  posts$ = this.postSource.asObservable();
  // function to select item by id out of list
  post$ = (id) => this.posts$.pipe(map(posts => posts.find(p => p.id === id)))

  getPosts() {
    // function to retrieve remote posts
    return this.get<Post[]>('posts');
  }

  loadPosts() {
    // function to fetch posts and update the subject value
    this.getPosts().subscribe(posts => this.postSource.next(posts));
  }
}

You will need to define the get function and call loadPosts whenever you need to refresh the list.

Answer 5

Answer №3

Provided Information:

!Please inform me if any of the statements are incorrect so I can update the answer!

There is a get function that returns an observable containing an array of posts
The get observable always emits when there are changes in the posts
The value inside the observable (Array>) is not observable and remains constant over time

this.get<Array<Post>>('posts')

Possible Functions:

() => getPostById$

// This function provides an observable with the post related to a specific id.
// The observable will only emit if the id is found and if there are changes in the post values
function getPostById$(id: string): Observable<Post> {
  const findId = (id: string) => (posts: Array<Post>): Post | undefined =>
     posts.find(post => post.id === id);

  const existingPost = (post: Post | undefined): boolean => post != null;

  const postComparator = (prevPost: Post, currPost: Post): boolean =>
    prevPost.value === currPost.value && prevPost.name === currPost.name;

  return this.get('posts').pipe(
    map(findId(id)),
    filter(existingPost),
    distinctUntilChanged(postComparator)
  );
}

() => getPosts$

function getPosts$(): Observable<Array<Post>> {
  return this.get('posts');
}

() => getStatePosts$

// This function enables you to manage your own state for posts
function statePosts$(posts$: Observable<Array<Posts>>, clear$: Observable<void>, add$: Observable<Post>): Observable<Array<Post>> {
  const updatePosts = (newPosts: Array<Posts>) => (oldPosts: Array<Posts>) => newPosts;

  const clearPosts = () => (oldPosts: Array<Posts>) => [];

  const addPost = (post: Post) => (oldPosts: Array<Posts>) => [...oldPosts, post];

  return merge(
    posts$.pipe(map(updatePosts)),
    clear$.pipe(map(clearPosts)),
    add$.pipe(map(addPost))
  ).pipe(
    scan((oldPosts, fn) => fn(oldPosts), [])
  )
}

// Usage
private posts$: Observable<Array<Post>> = this.get('posts');
private clear$: Subject<void> = new Subject();
private add$: Subject<Post> = new Subject();

public statePosts$ = getStatePosts(posts$, clear$, add$);

Hint: When reading the functions from the return statement first, it may help clarify what each operation does. If you have any questions, feel free to ask for clarification.

Answer 6

Provided Information:

!Please inform me if any of the statements are incorrect so I can update the answer!

There is a get function that returns an observable containing an array of posts
The get observable always emits when there are changes in the posts
The value inside the observable (Array>) is not observable and remains constant over time

this.get<Array<Post>>('posts')

Possible Functions:

() => getPostById$

// This function provides an observable with the post related to a specific id.
// The observable will only emit if the id is found and if there are changes in the post values
function getPostById$(id: string): Observable<Post> {
  const findId = (id: string) => (posts: Array<Post>): Post | undefined =>
     posts.find(post => post.id === id);

  const existingPost = (post: Post | undefined): boolean => post != null;

  const postComparator = (prevPost: Post, currPost: Post): boolean =>
    prevPost.value === currPost.value && prevPost.name === currPost.name;

  return this.get('posts').pipe(
    map(findId(id)),
    filter(existingPost),
    distinctUntilChanged(postComparator)
  );
}

() => getPosts$

function getPosts$(): Observable<Array<Post>> {
  return this.get('posts');
}

() => getStatePosts$

// This function enables you to manage your own state for posts
function statePosts$(posts$: Observable<Array<Posts>>, clear$: Observable<void>, add$: Observable<Post>): Observable<Array<Post>> {
  const updatePosts = (newPosts: Array<Posts>) => (oldPosts: Array<Posts>) => newPosts;

  const clearPosts = () => (oldPosts: Array<Posts>) => [];

  const addPost = (post: Post) => (oldPosts: Array<Posts>) => [...oldPosts, post];

  return merge(
    posts$.pipe(map(updatePosts)),
    clear$.pipe(map(clearPosts)),
    add$.pipe(map(addPost))
  ).pipe(
    scan((oldPosts, fn) => fn(oldPosts), [])
  )
}

// Usage
private posts$: Observable<Array<Post>> = this.get('posts');
private clear$: Subject<void> = new Subject();
private add$: Subject<Post> = new Subject();

public statePosts$ = getStatePosts(posts$, clear$, add$);

Hint: When reading the functions from the return statement first, it may help clarify what each operation does. If you have any questions, feel free to ask for clarification.

RxJs - What is the best approach for generating an array of Observables within an Observable?

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging setters in JavaScript for modifying properties

CSS Grid expands the item width on its own when there is still space left

Utilize the power of Javascript/AJAX or jQuery to submit multiple forms simultaneously

An issue arose when attempting to load the page using jQuery

Issue with vue-router redirection when pushing a route

The functionality of submitting AJAX chat messages is limited to $(document).keypress() only

Unable to retrieve a singular data point from a set

Achieve Custom Styling in Material UI Stepper Label with ReactJS: Adjust Font Size and Margin Top

Guidelines on extracting all choices from a select element and organizing them into a list

React - Inserting a break in the line;

CSS Toggle Navigation for Responsive Screen Re-Size in Both Horizontal and Vertical Orientations

Unable to render Blender model in threeJS scene due to undefined condition

The specified type '{}' cannot be assigned to type 'ReactNode'

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

Mistakes in design when transforming inline SVG to PNG format

Develop a new ASP.NET Core RESTful API utilizing JavaScript that handles DateTime conversion to UTC time, rather than

The issue of JQuery $(this) malfunctioning when used within a function parameter

In React version 16 and d3 version 4, if you try to use the mouse functionality from d3-selection, you may encounter a TypeError stating that it cannot read the property 'sourceEvent' of

Synchronizing information between different controllers using a service

Incorporate an additional javascript document into a VueJS component