前提・実現したいこと
前提
- Vue.jsで実装しております。
リストの元となるWebAPIがあります。(GET /team)
このteamは所属するユーザーのユーザーIDは存在するのですが、
ユーザーの名前はそれぞれのユーザーを取得するAPI(GET /user?userid=ユーザーID)
でのみ名前が取得できます。
イメージとしては、
0. GET /teamをして、1件ずつデーター取得時に、
0. GET /user?userid=ユーザーID
0. 最終的には上記データーを元に表形式でデーターを閲覧できるようにしたいです。
発生している問題・エラーメッセージ
上記の考え方を元にコードを実装しているのですが、
GET teamで取得(getTeamList)したデーターのuseridを元に、
1件ずつGET /user?userid=ユーザーIDを行い(getUserInfo)をした時の結果が、
全てuser1になってしまいます。
- 欲しい結果
チーム名 | userid | 氏名 |
---|---|---|
foo | user1 | 山田太郎 |
bar | user1 | 山田太郎 |
hogehoge | user2 | 木村庄之助 |
ugougo | user1 | 小錦八十吉 |
- 実際の結果(全部山田太郎になってしまう。)
チーム名 | userid | 氏名 |
---|---|---|
foo | user1 | 山田太郎 |
bar | user1 | 山田太郎 |
hogehoge | user2 | 山田太郎 |
ugougo | user1 | 山田太郎 |
GET /teamで取得されるデーター
{ "message": "Success", "teams": [ { "teamid": "foo", "userid": "user1", }, { "teamid": "bar", "userid": "user1", }, { "teamid": "hogehoge", "userid": "user2", }, { "teamid": "ugougo", "userid": "user3", }, (以下同様なデーター形式が続く)
GET /user?userid=user1で取得されるデーター
{ "message": "Success", "users": [ { "userid": "user1", "sei": "山田", "mei": "太郎", }
user2は木村庄之助、user3は小錦八十吉です。
該当のソースコード
vuejs
1 2<template v-for="(item) in list"> 3 <td>{{item.teamname}}</td> ← チーム名は表示される(getTeamList) 4 <td>{{item.userid}}</td> ← ユーザーIDは表示される(getTeamList) 5 <td>{{item.username}}</td> ← ユーザー名は表示されるが違う人の名前が表示される(getUserInfo) 6 ・ 7 ・ 8 ・ 9 10---- 11 methods: { 12 ・ 13 ・ 14 ・ 15 getUserInfo (userid) { 16 this.$http.get('https://api.hogehoge.com/user?userId=' + userid) 17 .then(response => { 18 this.username = response.body.users[0].sei + '/' + response.body.users[0].mei 19 }) 20 .catch(error => { 21 console.log(error) 22 this.errored = true 23 }) 24 .finally(() => this.loading = false) 25 }, 26 getTeamList () { 27 this.$http.get('https://api.hogehoge.com/team') 28 .then(response => { 29 this.list = response.body.team 30 console.log(this.list) 31 for (var i = 0; i < this.list.length; i++) { 32 this.getUserInfo(this.list[i].userId) 33 } 34 }) 35 } 36 37
Promiseを利用して非同期であるところまでわかったのですが、それを解決するためにどのようなコードを書けばよいのか想像が付き兼ねております。。。。お知恵をお貸し頂ければと思います。
回答1件
あなたの回答
tips
プレビュー