can’t figure out the correct calculation for this. So basically I have got some ranges returned from an API (items) and a count of vehicles within that range. I want to have the correct numbers within the dropdowns, so for example selecting from 2000 would return all the vehicles, as that’s the lowest price, however it says 27.
Then going further down that from list it becomes more and more off, as the total vehicles should match, and total vehicles will be correct.
Made the best example I could to show you the issue.
new Vue({
data: {
items: [
{ value: { from: 2000, to: 2500 }, count: 1 },
{ value: { from: 2500, to: 3000 }, count: 0 },
{ value: { from: 3000, to: 3500 }, count: 0 },
{ value: { from: 3500, to: 4000 }, count: 1 },
{ value: { from: 4000, to: 4500 }, count: 2 },
{ value: { from: 4500, to: 5000 }, count: 2 },
{ value: { from: 5000, to: 5500 }, count: 0 },
{ value: { from: 5500, to: 6000 }, count: 2 },
{ value: { from: 6000, to: 6500 }, count: 0 },
{ value: { from: 6500, to: 7000 }, count: 0 },
{ value: { from: 7000, to: 7500 }, count: 0 },
{ value: { from: 7500, to: 8000 }, count: 2 },
{ value: { from: 8000, to: 8500 }, count: 0 },
{ value: { from: 8500, to: 9000 }, count: 1 },
{ value: { from: 9000, to: 9500 }, count: 0 },
{ value: { from: 9500, to: 10000 }, count: 0 },
{ value: { from: 10000, to: 11000 }, count: 0 },
{ value: { from: 11000, to: 12000 }, count: 1 },
{ value: { from: 12000, to: 13000 }, count: 0 },
{ value: { from: 13000, to: 14000 }, count: 0 },
{ value: { from: 14000, to: 15000 }, count: 2 },
{ value: { from: 15000, to: 20000 }, count: 7 },
{ value: { from: 20000, to: 25000 }, count: 3 },
{ value: { from: 25000, to: 30000 }, count: 2 },
{ value: { from: 30000, to: 40000 }, count: 1 },
{ value: { from: 40000, to: 50000 }, count: 1 },
{ value: { from: 50000, to: 60000 }, count: 0 }
],
selected: {
from: null,
to: null
}
},
computed: {
total() {
let totalVehicles = 0;
this.items.forEach(item => {
const greaterThan = !this.selected.from || (item.value.from >= this.selected.from);
const lessThan = !this.selected.to || (item.value.to < this.selected.to);
if (greaterThan && lessThan) {
totalVehicles += item.count;
}
});
return totalVehicles;
},
rangeValues() {
const dropdown = {
from: [], to: []
};
// To
let counter = 0;
dropdown.to = this.items.map(i => {
counter += i.count;
return { value: i.value.to, label: i.value.to, count: counter }
}).filter(Boolean);
// From
counter = dropdown.to[dropdown.to.length-1].count;
dropdown.from = this.items.map(i => {
if (this.selected.to && i.value.from >= this.selected.to) {
return null;
}
counter -= i.count;
return { value: i.value.from, label: i.value.from, count: counter }
}).filter(Boolean);
return dropdown;
}
}
}).$mount('#app')h3, p {
margin: 0;
}
p {
margin-bottom: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3>Total Vehicles ({{ total }})</h3>
<p>The above in reality is what is returned from the API</p>
<label for="from">
From
<select name="from" id="from" v-model="selected.from">
<option :value="null">Select From</option>
<option :value="item.value"
v-for="item in rangeValues.from"
:key=`from-${item.value}`>{{ item.label }} ({{ item.count }})</option>
</select>
</label>
<label for="to">
To
<select name="to" id="to" v-model="selected.to">
<option :value="null">Select To</option>
<option :value="item.value"
v-for="item in rangeValues.to"
:key=`to-${item.value}`>{{ item.label }} ({{ item.count }})</option>
</select>
</label>
</div>