需要显示JSON数据，但是从一个具有匹配ID的JSON文件中显示Name作为另一个JSON文件
需要显示JSON数据，但是从一个具有匹配ID的JSON文件中显示Name作为另一个JSON文件
提问于 2019-05-09 05:42:34
我使用json-server和rxjs来显示表中的数据。
所以数据显示从leaderboard.json文件完全正常。我在表中这样做，我想添加一个包含播放器名称的列。
然而，对于玩家名称，当我将它们添加到表格中时，它会列出所有名称，并且我希望能够将其链接到相应的PlayerID并显示在正确的分数旁边。
JSON文件：
leaderboard.json：
{
"Results": [
{
"PlayerId": 5,
"TotalScore": 410,
"GamesPlayed": 16
},
{
"PlayerId": 2,
"TotalScore": 640,
"GamesPlayed": 15
},
{
"PlayerId": 6,
"TotalScore": 200,
"GamesPlayed": 9
},
{
"PlayerId": 1,
"TotalScore": 700,
"GamesPlayed": 9
},
{
"PlayerId": 4,
"TotalScore": 150,
"GamesPlayed": 9
},
{
"PlayerId": 3,
"TotalScore": 50,
"GamesPlayed": 3
}
]
}
players.json：
{
"Players": [
{
"PlayerId": 1,
"Name": "Karl Krueger"
},
{
"PlayerId": 2,
"Name": "Aaron Ashworth"
},
{
"PlayerId": 3,
"Name": "Elliot Earnshaw"
},
{
"PlayerId": 4,
"Name": "Tony Troy"
},
{
"PlayerId": 5,
"Name": "Sally Smith"
},
{
"PlayerId": 6,
"Name": "Bob Bronson"
}
]
}
这是我的leaderboard.service.ts：
apiUrl = "http://localhost:3000/Results";
playersUrl = "http://localhost:5000/Players";
constructor(private http: HttpClient) {}
getResults() {
return this.http.get<Results[]>(this.apiUrl);
}
getPlayers() {
return this.http.get<Players[]>(this.playersUrl);
}
}
还有我的leaderboard.component.ts：
results: Results[];
constructor(private leaderboardService: LeaderboardService) {}
ngOnInit() {
return this.leaderboardService
.getResults()
.subscribe(data => (this.results = data));
}
}
我想也许可以将两个JSON文件一起添加，但是我仍然不知道从哪里开始链接相应的播放器ID。
这是输出的图像：
在此输入图像描述
回答 1
Stack Overflow用户
发布于 2019-05-09 15:28:17
您可以使用forkjoin并行查询json，然后在订阅中进行后期处理。Javascript的本地人' .map()并且.find()是这里的好帮手：
ngOnInit() {
forkJoin(this.leaderboardService.getResults(),
this.leaderboardService.getPlayers())
.subscribe(([results, players]) => {
this.list = results.Results.map(res => ({
res,
PlayerName: players.Players.find(player => player.PlayerId == res.PlayerId).Name
}))
})
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006696
复制相关文章
相似问题