Fetching user data from api using user id - laravel

Question

I'm working on a chat system, each message belongs to a user, who sent it . In the database of messages I store just the user id, and I have a problem with fetching the users names, and replace it in the message.
This is the way I tried to fetch the username, by creating a method which takes the users id, and after fetching from api returns the users name, but the return doesn't work :
<div v-for="message in messages" :key="message.id" class="message">
#{{ getUserDetails(message.user_id) }}
<p>#{{ message.message }}</p>
</div>
methods: {
getUserDetails(id) {
fetch('/api/user/' + id)
.then(res => res.json())
.then(res => {
return res.name;
})
}
},
I hope you understand my problem, sorry for my bad english, is not my native language ...

Answer 1

The problem occurs because you are actually not return anything in getUserDetails function.
You are trying to return from a then() callback. But when you return a value from that, the next then() is called with that value. The parent function getUserDetails still returns nothing.
To solve your problem, I think you should use another object to store the usernames. This way, you would not overwhelm the server by doing a request to get the username for every message.
Something like this should work:
<div v-for="message in messages" :key="message.id" class="message">
#{{ getUsername(message.user_id) }}
<p>#{{ message.message }}</p>
</div>
data () {
return {
listUsername: {}
}
},
methods: {
getUsername(id) {
if (!this.listUsername[id]) {
this.getUserDetails(id)
return 'Unknown'
}
return this.listUsername[id]
},
getUserDetails(id) {
fetch('/api/user/' + id)
.then(res => res.json())
.then(res => {
this.$set(this.listUsername, id, res.name)
})
}
}