Associate values of an input to the nearest plane with jquery

Navigation
1

I have an input range that goes from 0 a 400.000 to each step of 5.000 and I have a set of plans (50.000, 70.000, 100.000, 120.000, 150.000, 200.000, 220.000, 250.000, 300.000, 350.000, 380.000 e 400.000 ) each plan contains different information that will be placed inside a table.

I need to bind the values placed in the input range by the user to the nearest plane, eg: range value = 20,000 will be linked to the 50,000 plan.

After this process the value will be inserted in (values.credit):

makeTable(valores.vcredito, json.planos, document.querySelector('tbody'));

The only values that will work in place of valores.vcredito are those of the plans, so I need to change the value of the input range to the value of the nearest plane.

I do not know if it was very clear, but I try to improve the question.

Thank you.

Edited :

I have the following code that assembles a table according to the chosen plan: 

const json = {
				"planos": [{
					"nome": "Imóvel 50",
					"credito": "50000",
					"100 parcelas": "R$605,00",
					"120 parcelas": "R$512,50",
					"135 parcelas": "R$462,96",
					"150 parcelas": "R$423,33 ",
					"180 parcelas": "-"
				}, {
					"nome": "Imóvel 70",
					"credito": "70000",
					"100 parcelas": "R$847,00",
					"120 parcelas": "R$717,50 ",
					"135 parcelas": "R$648,15",
					"150 parcelas": "R$592,67",
					"180 parcelas": "R$493,89"
				}, {
					"nome": "Imóvel 100",
					"credito": "100000",
					"100 parcelas": "R$1.210,00",
					"120 parcelas": "R$1.025,00",
					"135 parcelas": "R$925,93",
					"150 parcelas": "R$846,67",
					"180 parcelas": "R$705,56"
				}, {
					"nome": "Imóvel 120",
					"credito": "120000",
					"100 parcelas": "R$1.452,00",
					"120 parcelas": "R$1.230,00",
					"135 parcelas": "R$1.111,11",
					"150 parcelas": "R$1.016,00",
					"180 parcelas": "R$846,67"
				}, {
					"nome": "Imóvel 150",
					"credito": "150000",
					"100 parcelas": "R$1.452,00",
					"120 parcelas": "R$1.230,00",
					"135 parcelas": "R$1.111,11",
					"150 parcelas": "R$1.016,00",
					"180 parcelas": "R$846,67"
				}, {
					"nome": "Imóvel 200",
					"credito": "200000",
					"100 parcelas": "R$2.420,00 ",
					"120 parcelas": "R$2.050,00 ",
					"135 parcelas": "R$1.851,85 ",
					"150 parcelas": "R$1.693,33",
					"180 parcelas": "R$1.411,11 "
				}, {
					"nome": "Imóvel 220",
					"credito": "220000",
					"100 parcelas": "R$2.662,00",
					"120 parcelas": "R$2.255,00",
					"135 parcelas": "R$2.037,04",
					"150 parcelas": "R$1.862,67",
					"180 parcelas": "R$1.552,22"
				}, {
					"nome": "Imóvel 250",
					"credito": "250000",
					"100 parcelas": "R$3.025,00",
					"120 parcelas": "R$2.562,50",
					"135 parcelas": "R$2.314,81",
					"150 parcelas": "R$2.116,67",
					"180 parcelas": "R$1.763,89"
				}, {
					"nome": "Imóvel 300",
					"credito": "300000",
					"100 parcelas": "R$3.630,00",
					"120 parcelas": "R$3.075,00",
					"135 parcelas": "R$2.777,78",
					"150 parcelas": "R$2.540,00",
					"180 parcelas": "R$2.116,67"
				}, {
					"nome": "Imóvel 350",
					"credito": "350000",
					"100 parcelas": "R$4.235,00 ",
					"120 parcelas": "R$3.587,50",
					"135 parcelas": "R$3.240,74",
					"150 parcelas": "R$2.963,33",
					"180 parcelas": "R$2.469,44"
				}, {
					"nome": "Imóvel 380",
					"credito": "380000",
					"100 parcelas": "R$4.598,00",
					"120 parcelas": "R$3.895,00",
					"135 parcelas": "R$3.518,52",
					"150 parcelas": "R$3.217,33",
					"180 parcelas": "R$2.681,11"
				}, {
					"nome": "Imóvel 400",
					"credito": "400000",
					"100 parcelas": "R$4.840,00",
					"120 parcelas": "R$4.100,00",
					"135 parcelas": "R$3.703,70",
					"150 parcelas": "R$3.386,67",
					"180 parcelas": "R$2.822,22"
				}]
			};

			var valorCredito = $('#valores-credito').val();
			var valorParcela = $('#valores-parcela').val();

			function makeTable(credito, arr, target) {
				target.innerHTML = '';
				var data = arr.filter(imo => imo.credito == credito)[0];
				if (!data) return;
				Object.keys(data).filter(k => k.match(/\d+\s\parcelas/)).forEach(k => {
					var tr = document.createElement('tr');
					[k, '<span aria-hidden="true" class="fa fa-info-circle"></span>Mais informações', data[k]].forEach(content => {
						var td = document.createElement('td');
						td.innerHTML = content;
						tr.appendChild(td);
					});
					target.appendChild(tr);
				});
			}

			makeTable(valores.vcredito, json.planos, document.querySelector('tbody'));
    
asked by anonymous 05.09.2016 / 20:32

3 answers

1

Simply sweep the list item by item and as soon as you "pass", the valid value is the last. From what you mentioned in the example, the input range is only one value. (But input range implies that it will be a track)

As you have not posted any code snippet, I'll give you an example to get the minimum value: 

bool passou = false;
int indice = 0;
for (int i = 0; i < valores.size(); i++) {
  if (valorSendoTestado >= valores[i]) {
    passou = true;
    indice = i;
    break;
  }
}
// aqui a variável indice terá o valor do índice do array "valores"
// cujo valor está logo abaixo do "valorSendoTestado"
  • is not optimized, I wanted to write in a well-expanded way to facilitate understanding

If the input range is composed of two values (minimum and maximum), you can execute the loop by comparing it with the upper value of the scale.

I hope I have helped / responded!

    
05.09.2016 / 20:54
2

You need to find the value inside the array that is close to the one entered in the slider, you can do this using reduce . 

var planos = [50000, 70000, 100000, 120000, 150000, 200000, 220000, 250000, 300000, 350000, 380000, 400000];

var proposto = document.getElementById("proposto");
var plano = document.getElementById("plano");

proposto.addEventListener("input", function (event) {
  var valor = proposto.valueAsNumber;  
  var sugestao = planos.reduce(function (atual, plano) {
    var diffAtual = Math.abs(valor - atual);
    var diffPlano = Math.abs(valor - plano);
    return diffAtual < diffPlano ? atual : plano;
  });
  plano.value = sugestao;
})
<label>
  Valor Proposto:
  <input id="proposto" type="number" min="0" max="400000" step="5000" />
</label>

<label>
  Valor Plano:
  <input id="plano" type="text" value="" readonly />
</label>

P.S. While I was putting together the answer, suggest the others.

    
05.09.2016 / 21:05
1

So I understand you want to round out an arbitrary value to someone who's in a list of valid values. Of course there is a more efficient way, since your list is sorted, but an intuitive method would be to go through the whole list looking for the minimum difference between the given value and each element of the list. 

arredondar = function(lista,valor){
    var minDif = Infinity;
    var minIndice = 0;
    var dif = 0;
    for(i in lista){
        dif = Math.abs(lista[i] - valor);
        if (dif < minDif){
            minDif = dif;
            minIndice = i;
        }
    }
    return lista[minIndice];
}

I think with this initial idea you can adapt to your case.

    
05.09.2016 / 20:55
VueJS: How to display a value in the dynamic modal input with v-model or v-bind: value passing objects as parameters in c ++