Struggling with understanding RXJS Observables and pipes.
The API response structure is as follows:
{
"_embedded": {
"users": [
{
"id": 1,
"username": "steve"
}
]
}
}
Here are some simplified functions related to this scenario:
listUsers() {
return this.http.get<Users>(API_BASE_URL + '/v1/users').pipe(map(u => u._embedded.users))
}
getFirstUser() {
return this.listUsers().pipe(first())
}
listUsersById() {
return this.listUsers().pipe(reduce((acc, user) => {
acc[user.id] = user
return acc
}, {}))
}
Testing the functions outputs the following:
this.listUsers().subscribe(data => {
console.log("FUNC: listUsers()")
console.log(data)
console.log(data[0])
})
this.listUsersById().subscribe(data => {
console.log("FUNC: listUsersById()")
console.log(data)
console.log(data[0])
})
this.getFirstUser().subscribe(data => {
console.log("FUNC: getFirstUser()")
console.log(data)
})
listUsers() works correctly by displaying an array of 11 user objects followed by the first user object in the array.
listUsersById() displays { undefined: [array of 11 user objects] } instead of a hash where keys represent ids and values represent user objects.
getFirstUser() incorrectly logs out an array of 11 user objects instead of just one.
The issue seems to be that RXJS doesn't internally treat the return value from listUsers() as an array, rendering the pipe functions ineffective.
I aim to create a seamless data pipeline without executing the function(s) until required. How can I achieve this when using Angular's HTTPClient that returns a promise?
If I manually resolve the http request and have the data accessible in an array, everything works smoothly:
from([
{
id: 1,
username: "steve"
},
{
id: 2,
username: "jane"
}
]).pipe(reduce((acc, user) => {
acc[user.id] = user
return acc
}, {}))