Why am I obtaining this error when I try to chain 2 map() RxJS operators into a pipe()?

Question

In an Angular project I have defined these 2 methods:

acceptArtistBid(bid: Bid): Observable<Bid[]> {
    console.log("acceptArtistBid() start !!!");

    // define a variable to hold the list of bids
    let listOfBids: Array<Bid>;

    // notice that the Observable is returned by this method and not subscribed in the service
    return this.findArtistBidsAppliedByCurrentWall(bid).pipe(
        // here you use the map of Observable to transform the list, and within this map you call the map Array method to run the transformation on each bid
        map(artistsBisdList => {
            return listOfBids = artistsBisdList.map(bid => {
                bid["test"] = "TEST";
                console.log("CURRENT BID: ", bid);
                return bid;
            })

        }),

        /* Assume updateFirestore$ is a method that returns an Observable representing the update operation.
           This second map operator returns an array of Observables
         */
        map(modiefiedListOfBids => modiefiedListOfBids.map(updatedBid => {
            console.log("UPDATED BID: ", updatedBid);
            // UPDATED updatedBid OBJECT ON FIRESTORE
        }));
        )
}

findArtistBidsAppliedByCurrentWall(bid): Observable<Bid[]> {
    return this.db.collection('bids',
        ref => ref.where("wallId", "==", bid.wallId))
        .snapshotChanges()
        .pipe(
            map(snaps => {
                const courses = this.convertSnaps<Bid>(snaps);
                return courses;
            })
        )
}

So, as you can see the acceptArtistBid() method first calls the findArtistBidsAppliedByCurrentWall() method retrieving an Observable containing an array of Bid objects and for this Observable I am defining a pipe() chain of RxJS operators. The first operator (that worked fine) simply iterate on each Bid object of this array emitted by the observable and perform a modification of each object (at the moment simply adding a field) building this listOfBids containing the array of modified objects.

Then I want to chain a second operator that will iterate on the new Observable represented by the previous map() step in the chain in order to print in the console each modified element and the call a method that update it on FireStore database (this second functionality is not yet implemented).

The problem is that when I added these second map in my pipe() chain:

map(modiefiedListOfBids => modiefiedListOfBids.map(updatedBid => {
    console.log("UPDATED BID: ", updatedBid);

    // UPDATED updatedBid OBJECT ON FIRESTORE
}));

the IDE gives me the following error:

Type 'Observable<void[]>' is not assignable to type 'Observable<Bid[]>'.
  Type 'void[]' is not assignable to type 'Bid[]'.
    Type 'void' is not assignable to type 'Bid'.ts(2322)

What is wrong? What am I missing? How can I fix it?

Answer 1

Your second map returns void, you should change it to:

map(modiefiedListOfBids => modiefiedListOfBids.map(updatedBid => {
    console.log("UPDATED BID: ", updatedBid);
    return updatedBid;
}));

The method expects an Observable<Bid[]> and you returned a Observable<void[]> (by not returning anything). This is why you get this error.

Answer 2

You have to return an object of type 'Bid[]' in modiefiedListOfBids.map function.

map(modiefiedListOfBids => modiefiedListOfBids.map(updatedBid => {
console.log("UPDATED BID: ", updatedBid);

// UPDATED updatedBid OBJECT ON FIRESTORE

return updatedBid; //return the modified object
}));