Home>
Assumptions
  • It is implemented with Vue.js.

There is a WebAPI that is the basis of the list.(GET/team)
Although this team has a user ID of the user to which it belongs,
User names are APIs to retrieve each user (GET/user? Userid = user ID)
You can get the name only with.
As an image,

  1. Do GET/team and get data one by one,
  2. GET/user? userid = User ID
  3. I want to be able to view the data in tabular form based on the above data.
Error message

I have implemented the code based on the above idea.
Based onuseridof data obtained by GET team (getTeamList),
WhenGET/user? Userid = user IDis done one by one (getUserInfo), the result is
All will beuser1.

  • I want

    Team name userid Name
    foo user1 Taro Yamada
    bar user1 Taro Yamada
    hogehoge user2 Shinosuke Kimura
    ugougo user1 Konishiki Hachikichi
  • Actual results (all will be Taro Yamada)

Team name userid Name
foo user1 Taro Yamada
bar user1 Taro Yamada
hogehoge user2 Taro Yamada
ugougo user1 Taro Yamada

Data obtained withGET/team

{
    "message": "Success",
    "teams": [
        {
            "teamid": "foo",
            "userid": "user1",
        },
        {
            "teamid": "bar",
            "userid": "user1",
        },
        {
            "teamid": "hogehoge",
            "userid": "user2",
        },
        {
            "teamid": "ugougo",
            "userid": "user3",
        },
(Same data format follows)

Data obtained withGET/user? userid = user1

{
    "message": "Success",
    "users": [
        {
            "userid": "user1",
            "sei": "Yamada",
            "mei": "Taro",
        }


user2 isShinosuke Kimura, and user3 isHachikichi Konishiki.

Applicable source code
<template v-for = "(item) in list">
  <td>{{item.teamname}}</td>← Team names are displayed (getTeamList)
  <td>{{item.userid}}</td>← User ID is displayed (getTeamList)
  &lt;td&gt;{{item.username}}&lt;/td&gt;←<User name is displayed but the name of a different person is displayed (getUserInfo)
     ・
     ・
     ・
----
  methods: {
      ・
      ・
      ・
    getUserInfo (userid) {
      this. $http.get ('https://api.hogehoge.com/user?userId=' + userid)
        .then (response =&gt;{
          this.username = response.body.users [0] .sei + '/' + response.body.users [0] .mei
        })
        .catch (error =&gt;{
          console.log (error)
          this.errored = true
        })
        .finally (() =&gt;this.loading = false)
    },
    getTeamList () {
      this. $http.get ('https://api.hogehoge.com/team')
        .then (response =&gt;{
          this.list = response.body.team
          console.log (this.list)
          for (var i = 0;i&lt;this.list.length;i ++) {
            this.getUserInfo (this.list [i] .userId)
          }
        })
    }

I understand that it is asynchronous using Promise, but I can't imagine what kind of code I should write to solve it. . . . I hope you can lend me your wisdom.

  • Answer # 1

    this.username = response.body.users [0] .sei + '/' + response.body.users [0] .mei


    Where does thisthis.usernamerefer to?
    Isn'tthis.list [i] .usernamethe expected reference location?
    As long as you look at the template file, the data you want to create looks like this, right?

    // contents of this.list
    [
        {
            "teamid": "foo",
            "userid": "user1",
            "username": "Taro Yamada"
        },
        {
            "teamid": "bar",
            "userid": "user1",
            "username": "Taro Yamada"
        },
        {
            "teamid": "hogehoge",
            "userid": "user2",
            "username": "Shinosuke Kimura"
        },
    ]
    If

    ,this.getUserInfo (this.list [i] .userId, i)should be executed withiadded as an argument.

    And getUserInfo method contents
    this.list [i] .username = response.body.users [0] .sei +'/'+ response.body.users [0] .mei
    Please change to.

Related articles