Associate input values to the nearest plan with jquery

Asked

Viewed 121 times

1

I have an input range that goes from 0 a 400.000 every 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 of this contains different information that will be placed inside a table.

Good need to link the values placed in the user input range to the nearest plan, eg: range value = 20,000 will be linked to the 50,000 plan.

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

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 transform the value of the input range into the value of the nearest plan.

I do not know if it was very clear but something 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'));

javascript jquery

3 answers

1

You need to find the value within the array that approaches the one entered in the slider, you can do this by using the 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 assembling the answer, suggest the others.

  • cool more or less like your same example, I’ll take a look and see how I can adapt to my code, anything notice here, Thank you.

  • I am unable to put in my code, when I give a console.log (sugestao) says that suggest this undefined.

0


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

Since you didn’t post any code snippets, I’ll give you an example to find 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 well expanded to facilitate understanding

If the input range is composed of two values (minimum and maximum), the loop can be executed by comparing to the upper value of the scale.

I hope I helped/answered!

  • in fact the input has only one value and is that input slider, the friend upstairs put an example and it worked, however I tried to put in my code but ended up giving error in the variable sugestao as undefined. What part of code can I post to make it easier for people to understand?

  • 1

    By the code you posted, I was able to do some tests and got good results. filter, just filter by the elements whose credit is less than the past as parameter and take the last element. Summarizing: var data = arr.filter(imo => imo.credito <= credito).pop(); valores.vcredito, but ensuring that there is a numerical value, the rest will work.

  • 1

    I put it in Jsfiddle (https://jsfiddle.net/cuwbnsb2/1/)

  • valores.vcredito comes from the value placed by the user in the input range , I’ll take a look at the code you made and see if I can put here, mto thanks

  • The code worked but when I put a value on var valores below 50000 it does not round to 50000.

  • 1

    I changed it a bit to take this case too: (https://jsfiddle.net/osmarcf/cuwbnsb2/2/)

Show 1 more comment

0

From what I understand you want to round up an arbitrary value for some that is in a list of valid values. There is certainly a more efficient way, given that your list is sorted, but an intuitive method would be to go through the entire 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.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.