Popular table with data from a JSON

Asked

Viewed 3,286 times

0

Hello, I need to popular a table according to what the user chooses in an input range, example in the range he chooses the value R$200,000 ai at the end of the form fill returns me a table (made with ul and li) with the data referring to the plan of R$200,000. I have the following data:

{
    "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"
        }
    ]
}

the table would be this one:

Tabela criada com <code>li</code>

I do not intend to store the table data in a database, only the form data is being saved in database and this is already ok, I just need to make the table appear with the data corresponding to the input range value. Can I use jquery? This table will appear just below the form after the user clicks submit.

javascript jquery html json table

  • Is the range fixed at a single value or is it double? it refers to the field crédito?

  • @Sergio he is fixed, his value varies from 0 a 400.000 as well as credit.

1 answer

1


Here is a suggestion:

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/

Browser other questions tagged javascript jquery html json table

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