我使用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。
这是输出的图像:
发布于 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
}))
})
}
https://stackoverflow.com/questions/-100006696
复制相似问题