I have tried to make this work all day long, and I have no idea what is happening.
I have this html table using vue v-for (I reduced the code to make it clearer):
<table id="timeSheet-datatable" class="table table-striped dt-responsive w-100">
<thead>
<tr>
<th>Project</th>
</tr>
</thead>
<tbody>
<tr v-for="(timeSheet,index) in timeSheetListPageable">
<td>{{getProjectById(timeSheet.projectId)}}</td>
</tr>
</tbody>
and I have this js:
async getProjectByIds(param){
var result = '';
await axios
.get(`/project/${param}`).then(response => {
result= response.data.name;
}, response => {
(err) => console.log(err)
});
return await result;
},
getProjectById(param){
const data = this.getProjectByIds(param);
console.log(data)
return data;
},
The problem is that I don't know why the return is not working, the table results are empty spaces, and if I add async and await to getProjectById method the return is [object Promise].
The console.log inside the getProjectById works property, it shows the correct returns from the Axios, but the return to the table doesn't work. I already tried to change a lot of things in this code, any suggestions?
await result after axios.then() construct will not result in the expected sequential flow.
You need to use either promises or multiple await statements to make the code readable and execute properly.
async getProjectByIds(param){
var result = '';
try {
var response = await axios.get(`/project/${param}`)
result = response.data.name;
} catch (err) {
console.error(err)
}
return result;
},
async getProjectById(param){
const data = await this.getProjectByIds(param);
console.log(data)
return data;
},
I am not sure about the actual response.data statement. You may or maynot have to use an await there.