循环数组并为 Observable 中的每个 id 返回数据 [英] Loop array and return data for each id in Observable
问题描述
使用 RxJS v6 从子集合中为循环中的每个项目检索数据具有挑战性.无法迭代从 HTTP 调用中检索到的 throw 数组.合并映射仅对需要对所有数组项执行此操作的单个项执行.
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.
我已经坚持了 3 天.我什么都试过了.问题是新的管道语法虽然为您提供了组织代码的简洁方法，但没有简单的方法来循环抛出数据集合.无法使用 map javascript 函数，因为它在 observable 之外并且返回的项目未定义.在互联网上，我只能找到一个很好用的 mergeMap 的基本示例.但是我需要使用使用 http 调用并将响应附加到同一对象的数组中的每个项目.
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.
我从第 3 方的两个端点开始，我无法控制.我模拟了一些示例 API 来说明.
I start with two endpoints from 3rd party which I have no control off. I have mocked some example API to illustrate.
端点 1 - 返回所有项目 ID:http://localhost:3000/contact
Endpoint 1 - Returns all items ID's: http://localhost:3000/contact
{
"name": "test",
"contact": [
{
"_id": "5c9dda9aca9c171d6ba4b87e"
},
{
"_id": "5c9ddb82ca9c171d6ba4b87f"
},
{
"_id": "5c9ddb8aca9c171d6ba4b880"
}
]
}
端点 2 - 返回单项信息:http://localhost:3000/contact/5c9dda9aca9c171d6ba4b87e
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"
}
]
期望的结果 - 通过使用 RxJs v6+ 返回带有嵌套数据的 Observable:
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"
}
}
]
}
我只是在尝试使用 Javascript 循环时遇到错误，并且使用不同的运算符也没有给我带来太多问题，因为问题在于 RxJs 中的循环.这是我制作的代码.请提供任何有用的建议或文档.
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
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"
}
]
推荐答案
这很可能使用嵌套的 mergeMap 和 map.坚持使用 Observable 的一个关键方法是使用 from 函数将 contacts 数组扩展为 observable.然后使用 toArray 运算符收集数据.提供文档化示例:
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),
// 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})),
)
),
);
}
不推荐使用结果选择器
在内部的mergeMap中，您可以在之后使用map.
result selector is deprecated
In the inner mergeMap, you can use a map afterwards.
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 })),
),
),
),
);
}
这篇关于循环数组并为 Observable 中的每个 id 返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
