How to get the value base on range of two number in vue js

Question

Result of my code is 0 I want to return the value base on what there basic_salary belongs for eg. His basic_salary is 40,000 it returns 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>
               </table>

In 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,   
  }
]

Answer 1

Reduce iterates the whole array - so you're getting the result of the last iteration

You want to find the correct object, and return the ee property ...

So use array find - like so

return Object.values(this.contriDatas)
.find(data => value >= data.range_from && value <= data.range_to)?.ee || 0;

or, or less modern browsers

return (Object.values(this.contriDatas)
.find(data => value >= data.range_from && value <= data.range_to) || {ee:0}).ee;

test code to show it DOES work

const 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": 40000,
    "range_to": 4500,
    "er": 400,
    "ee": 400,
    "created_at": null,
    "updated_at": null
  }
];
const test = value => {
  return Object.values(contriDatas)
  .find(data => value >= data.range_from && value <= data.range_to)?.ee || 0;
}

console.log(test(3500));
console.log(test(100));
console.log(test(1500));

Answer 2

reduce() is for when you to flatten an array of elements into a single value. But what you want to do is find() the first element in the array that matches the condition value >= val.range_from && value <= val.range_to, and return its ee field.

It may look something like this:

contribution(value){   
  const data = this.contriDatas.find(x => value >= x.range_from && value <= x.range_to)
  if (data) {
    return data.ee
  }
  return 0
},

find returns undefined if no element matches, so there is a conditional that checks if data is truthy. If an element is found, its ee value is returned, otherwise this returns 0.