How do I make a query based on the return of another query in Angular with Firestore?

Question

Im trying to get some Ids from a collection, and then trying to use each of these Ids to get more data from another collection. Here is what I got done so far:

Basically, I have blog app in which multiple users will be able to post an article. And said article has categories. The thing is, when a user selects a category to filter, it will bring me all USERS that have an article in said category (instead of bringing all articles of the selected category).

So, in Firestore I have:

categories/{categoryId}/users/{userId}

Although the {userId} has more info inside it (like the articles ids in this {categoryId}), I'm just interested in the userId itself for now.

What I want to do is to use the recovered userIds from the above path, and use it to get the user data from the following path:

users/{userId}

And here's where I'm stuck and not sure how to proceed next.. Should I store the ids in a array, and then make requests to Firestore using a forEach loop in said array? Should I duplicate the user data on categories/{categoryId}/users/{userId}? Perhaps change my Firestore data structure? Or perhaps theres a different way to do it in Angular?

this.afs.collection<Category>('categories').doc(category.name).collection<User>('users')
            .snapshotChanges().map(docChangeActionArray => {
                return docChangeActionArray.map(value2 => {
                    return value2.payload.doc.id;
                })
            }).subscribe(ids => {

                //WHAT TO DO HERE?
            })

I apologise for such a simple question. I'm still getting the hang of Angular and Firestore, but appreciate any help!

Thanks.

UPDATE

I did the following:

.subscribe(ids => {
    ids.map(id => {
        this.afs.collection('users').doc<User>(id).valueChanges().map(user => {
            return user;
        }).subscribe(user => {
            console.log(user); //Got it!
        })
    })
})

Answer 1

What I want to do is to use the recovered userIds from the above path, and use it to get the user data from the following path: users/{userId}

You're almost there. What you need to do, is to use the id of the user that you get from the database inside a new reference. So in this case, you need to use nested listeners. So inside your first callback, just create a new reference using the user id and get the details for each user like this:

return docChangeActionArray.map(value2 => {
    return value2.payload.doc.id;

    this.afs.collection<User>('users').doc(value2.payload.doc.id).snapshotChanges().map(/* ... */);
})

Note, that is nothing wrong about nested listeners in Cloud Firestore.

Should I store the ids in a array, and then make requests to Firestore using a forEach loop in said array?

There is no need for that.

Should I duplicate the user data on categories/{categoryId}/users/{userId}? Perhaps change my Firestore data structure?

It depends on use-case of your app. How much duplication data versus extra database calls is optimal for you, it really depends on your project's requirements. For more informations, please see my answer from this post.

Or perhaps theres a different way to do it in Angular?

I cannot see another approach in this case. It's up to you to decide which solution might be better for you, given the information in the answer from the post above.