Using RxJS v6 is challenging to retrieve data from sub collection for every item in the loop. There is no way to iterate throw array that is retrieved from HTTP call. Merge map does it only for single item where there is a requirement to do it on all array items.
I've been stuck on this for 3 days. I've tried everything. Problem is that new pipe syntax while provides you with neat way to organise code there is no easy way to loop throw collection of data. It is impossible to use map javascript function as it is outside observable and items returned are undefined. On internet I could only find basic examples for a single mergeMap which works great. However I need to use every item in array with http call and append response to same object.
I start with two endpoints from 3rd party which I have no control off. I have mocked some example API to illustrate.
Endpoint 1 - Returns all items ID's: http://localhost:3000/contact
{
"name": "test",
"contact": [
{
"_id": "5c9dda9aca9c171d6ba4b87e"
},
{
"_id": "5c9ddb82ca9c171d6ba4b87f"
},
{
"_id": "5c9ddb8aca9c171d6ba4b880"
}
]
}
Endpoint 2 - Returns single item information: http://localhost:3000/contact/5c9dda9aca9c171d6ba4b87e
[
{
"_id": "5c9dda9aca9c171d6ba4b87e",
"firstName": "Luke",
"lastName": "Test",
"email": "vgadgf@adsgasdg.com",
"created_date": "2019-03-29T08:43:06.344Z"
}
]
DESIRED RESULT - By using RxJs v6+ return Observable with nested data:
{
"name": "test",
"contact": [
{
"_id": "5c9dda9aca9c171d6ba4b87e".
"relationship": {
"_id": "5c9dda9aca9c171d6ba4b87e",
"firstName": "Luke",
"lastName": "Test",
"email": "vgadgf@adsgasdg.com",
"created_date": "2019-03-29T08:43:06.344Z"
}
},
{
"_id": "5c9ddb82ca9c171d6ba4b87f",
"relationship": {
"_id": "5c9ddb82ca9c171d6ba4b87f",
"firstName": "Name2",
"lastName": "Test2",
"email": "vgadgf@adsgasdg2.com",
"created_date": "2019-03-29T08:43:06.344Z"
}
},
{
"_id": "5c9ddb8aca9c171d6ba4b880",
"relationship": {
"_id": "5c9ddb8aca9c171d6ba4b880",
"firstName": "Name3",
"lastName": "Test3",
"email": "vgadgf@adsgasdg3.com",
"created_date": "2019-03-29T08:43:06.344Z"
}
}
]
}
I just get errors when trying to use Javascript loop and using different operators doesn't give me much either as problem is with looping in RxJs. This is code I have produced. Please provide any useful suggestions or documentation.
testService.service.ts
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {concatMap, map, mergeMap} from 'rxjs/operators';
@Injectable()
export class TestServiceService {
constructor(
private http: HttpClient
) { }
public getCombinedData(): Observable<any> {
return this.getMultipleRelationData()
.pipe(
map((result: any) => {
result = result.contact;
return result;
}),
mergeMap((fullResults: any) => {
return fullResults[0].relationship = this.getSingleData(fullResults[0]._id);
})
);
}
public getSingleData(id): Observable<any> {
return this.http.get('http://localhost:3000/contact/' + id);
}
public getMultipleRelationData(): Observable<any> {
return this.http.get('http://localhost:3000/contact');
}
}
My current end data looks like just a single item. Its great if I wanted to make just a single call... However its far from desired output described above.
[
{
"_id": "5c9dda9aca9c171d6ba4b87e",
"firstName": "Luke",
"lastName": "Test",
"email": "vgadgf@adsgasdg.com",
"__v": 0,
"created_date": "2019-03-29T08:43:06.344Z"
}
]
This is quite possible using nested mergeMap
and map
. A key approach to stick with Observable is expanding the contacts array into an observable using from
function. Then you collect the data using toArray
operator. Providing documented example:
public getCombinedData(): Observable<any> {
return this.getMultipleRelationData().pipe(
mergeMap((result: any) =>
// `from` emits each contact separately
from(result.contact).pipe(
// load each contact
mergeMap(
contact =>
this.getSignleData(contact._id).pipe(
map(detail => ({ ...contact, relationship: detail })),
),
// collect all contacts into an array
toArray(),
// add the newly fetched data to original result
map(contact => ({ ...result, contact })),
),
),
),
);
}
--- Old answer (Using deprecated result selector api)
public getCombinedData(): Observable<any> {
return this.getMultipleRelationData()
.pipe(
mergeMap((result: any) =>
// `from` emits each contact separately
from(result.contact).pipe(
// load each contact
mergeMap(
contact => this.getSignleData(contact._id),
// in result selector, connect fetched detail
(original, detail) => ({...original, relationship: detail})
),
// collect all contacts into an array
toArray(),
// add the newly fetched data to original result
map(contact => ({ ...result, contact})),
)
),
);
}