0

Olá, preciso popular uma tabela de acordo com o que o usuário escolhe em um input range, exemplo no range ele escolhe o valor R$200.000 ai no fim do preenchimento do formulário me retorna uma tabela (feito com ul e li) com os dados referentes ao plano de R$200.000. Tenho os seguintes dados:

{
    "planos":
    [
        {
             "nome":         "Imóvel 50",
             "credito":      "R$ 50.000,00",
             "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":      "R$70.000,00",
             "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":      "R$100.000,00",
             "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":      "R$120.000,00",
             "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":      "R$120.000,00",
             "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":      "R$200.000,00",
             "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":      "R$220.000,00",
             "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":      "R$250.000,00",
             "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":      "R$300.000,00",
             "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":      "R$350.000,00",
             "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":      "R$380.000,00",
             "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":      "R$400.000,00",
             "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"
        }
    ]
}

a tabela seria essa aqui:

Tabela criada com <code>li</code>

Não pretendo guardar os dados da tabela em um banco de dados, somente os dados do form estão sendo salvos em banco e isso ja esta ok, so preciso agora fazer a tabela aparecer com os dados correspondente ao valor do input range. Consigo usar so jquery? Essa tabela vai aparecer logo abaixo do formulário depois que o usuário clicar em enviar.

2
  • O range é fixo num só valor ou é duplo? ele refere-se ao campo crédito?
    – Sergio
    Commented 4/09/2016 às 20:34
  • @Sergio ele é fixo, o valor dele dele varia de 0 a 400.000 assim como de credito.
    – user27585
    Commented 4/09/2016 às 20:51

1 Resposta 1

1

Aqui fica uma sugestão:

const json = {
    "planos": [{
        "nome": "Imóvel 50",
        "credito": "R$ 50.000,00",
        "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": "R$70.000,00",
        "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": "R$100.000,00",
        "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": "R$120.000,00",
        "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": "R$120.000,00",
        "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": "R$200.000,00",
        "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": "R$220.000,00",
        "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": "R$250.000,00",
        "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": "R$300.000,00",
        "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": "R$350.000,00",
        "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": "R$380.000,00",
        "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": "R$400.000,00",
        "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"
    }]
};

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>Mais info...</span>', data[k]].forEach(content => {
				var td = document.createElement('td');
				td.innerHTML = content;
				tr.appendChild(td);
		});
		target.appendChild(tr);
	});
}

makeTable('R$200.000,00', json.planos, document.querySelector('table'));
td {
	background-color: #ddd;
	padding: 20px;
	border: 2px solid #888;
}
<table></table>

jsFiddle: https://jsfiddle.net/1djyg26b/

0

Você deve fazer log-in para responder a esta pergunta.