RxJs/Angular：通过在映射循环中订阅获取额外数据

我对angular和rxjs很陌生，我就是无法解决它。 我知道我的代码是错误的，但我不知道如何正确编写

我通过HTTP请求获取JSON，JSON包含数组中的数据。 在此之后，我想在JSON数据内的数组中循环，并获取另一个HTTP端点的附加数据

我查看了flatMap、switchMap等，但在我的案例中无法组合这些命令

谢谢你们

到目前为止，我的代码是：

  checkMatches() {
    this.http.get<{
      message: string,
      result: any}>
    (BACKEND_URL + 'matches')
        .pipe(map((matchData) => {
          return {matches: matchData.result.map(match => {
            this.userService.getUserData(match.matchedUser).subscribe(userData => {
              console.log(userData);
            }
              );
            return {
              id: match._id,
              matchedUser: match.matchedUser,
              firstMatch: match.firstMatch,
              name: userData.userName,
              img: userData.userImg,
              status: match.status,
            };
          })};
        }))
        .subscribe(transformedMatchData => {
        console.log(transformedMatchData);
        });
  }

checkMatches（）{
这是http.get
（后端URL+匹配项）
.pipe（映射（（匹配数据）=>{
返回{matches:matchData.result.map（匹配=>{
this.userService.getUserData（match.matchedUser）.subscribe（userData=>{
console.log（userData）；
}
);
返回{
id:匹配。\u id，
matchedUser:match.matchedUser，
firstMatch:match.firstMatch，
名称：userData.userName，
img:userData.userImg，
状态：match.status，
};
})};
}))
.订阅（transformedMatchData=>{
console.log（transformedMatchData）；
});
}

正如下面的评论中所提到的，您应该重新考虑这个体系结构，您应该有一种方法在一个/两个请求中获取所有这些记录，而不是在循环长度为“N”时触发“N”个请求

回答最初发布的问题：

似乎对于每个匹配的响应，您都需要查询API，您可以在此处使用

swicthMap（）

以及

forkJoin

：

使用

switchMap

将

（后端URL+“匹配”）合并，即父可观察的
URL可观察以及我们用其结果创建的下一个可观察，并且，它还取消再次发出的新请求

使用
forkJoin
将使您在发送数据之前等待所有子对象完成

checkMatches() {
    this.http.get<{
    message: string,
    result: any}>
    (BACKEND_URL + 'matches')
        .pipe(switchMap((matchData) => {
            return forkJoin(
                ...matchData.result.map(match => {
                    return this.userService.getUserData(match.matchedUser).pipe(
                        map((userData) => {
                            return {
                                id: match._id,
                                matchedUser: match.matchedUser,
                                firstMatch: match.firstMatch,
                                name: userData.userName,
                                img: userData.userImg,
                                status: match.status,
                            };
                        })
                    )
                })
            )
        }))
        .subscribe(transformedMatchData => {
            console.log(transformedMatchData);
        });
}

checkMatches（）{
这是http.get
（后端URL+匹配项）
.pipe（开关映射（（匹配数据）=>{
返回叉连接(
…matchData.result.map（匹配=>{
返回此.userService.getUserData（match.matchedUser）.pipe(
地图（（用户数据）=>{
返回{
id:匹配。\u id，
matchedUser:match.matchedUser，
firstMatch:match.firstMatch，
名称：userData.userName，
img:userData.userImg，
状态：match.status，
};
})
)
})
)
}))
.订阅（transformedMatchData=>{
console.log（transformedMatchData）；
});
}
看起来您正在一个数组上循环，并在每个循环中执行HTTP调用，您能以更好的方式指定所有需求吗？@AshishRanjan这是正确的。第一个http调用为我提供了如下JSON:{message:sometext，matches:[{id:xxx，status，:xxx，userId:xxx}]。要完成我的数据，我需要“getUserData”的附加数据（用户名和imageUrl）这也是一个HTTP请求。我投了赞成票，因为您提供了一个可行的解决方案，但我同意您对其OP的评论-这应该采用不同的架构，以便不需要进行太多的跨线传输。似乎所有这些数据都可以通过一个GET获取。@BlairHolmes是的，这是正确的，所以许多请求不应该用于一个GET单身GET@AshishRanjan非常感谢，这很好！嗯，好吧，也许我应该更改服务器端代码，以捕获那里的用户数据。