When my code generates a result of 0, I need to determine the corresponding value based on the basic_salary. For example, if the basic_salary is 40,000, it should return the value of "ee": 400.
<table class="table table-hover table-bordered table-sm">
<thead>
<tr>
<th scope="col">Contribution</th>
</tr>
</thead>
<tbody>
<tr v-for="(fetch, count) in SalaryData">
<td>
<input type="text" v-bind:value="deducted = contribution(fetch.basic_salary)">
</td>
</tr>
</tbody>
</table>
Within my methods....
contribution(value){
return Object.values(this.contriDatas).reduce((acc, val)=>{
if(value >= val.range_from && value <= val.range_to) {
return val.ee;
} else {
return 0;
}
}, 0);
}
This is the data structure of contriDatas
[
{
"id": 1,
"range_from": 1000,
"range_to": 1249.99,
"er": 83.7,
"ee": 36.3,
"created_at": null,
"updated_at": null
},
{
"id": 2,
"range_from": 1250,
"range_to": 1749.99,
"er": 120.5,
"ee": 54.5,
"created_at": null,
"updated_at": null
},
{
"id": 3,
"range_from": 3500,
"range_to": 3600,
"er": 300,
"ee": 300,
"created_at": null,
"updated_at": null
},
{
"id": 4,
"range_from": 4000,
"range_to": 4500,
"er": 400,
"ee": 400,
"created_at": null,
"updated_at": null
}
]
Data structure of SalaryData
[
{
"basic_salary": 1300,
},
{
"basic_salary": 50000,
}
]