fragment kodu o którym wspomniałem w komentarzu generuje stronę z komponentami "card" oraz komplet modalnych okienek z formą na parametry:
var tbody = document.querySelector("#first_row");
var tmodal = document.querySelector("#modal_row");
//console.log(car);
function getModalForm(car) {
var form=``;
var params = car.params;
params.forEach (item => {
form += `
<div class="row">
<div class="input-field col s12">
<input value="${item.value}" id="${item.id}" type="${item.type}" class="${item.class}">
<label for="disabled">${item.label}</label>
</div>
</div>`;
})
return `
<!-- Modal Structure -->
<div id="${car.modalid}" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Parametry</h4>
${form}
</div>
<div class="modal-footer">
<a href="#!" class="m modal-close waves-effect waves-green btn-flat">Zapisz</a>
</div>
</div>`
}
function getCard(car) {
return `<div class="col s6 m12">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">${car.type} ${car.model}</span>
<p>${car.color}</p>
</div>
<div class="card-action">
<a class="waves-effect waves-light btn modal-trigger" href="#${car.modalid}">Parametry</a>
<a class="waves-effect waves-light right btn" href="#">Run</a>
</div>
</div>
</div>`
}
console.log(car);
car.forEach(element => {
var crd = getCard(element);
tbody.insertAdjacentHTML('beforeend',crd);
var modal = getModalForm(element);
tmodal.insertAdjacentHTML('beforeend',modal);
});
no i dowolne dane jako obiekt json :
const car = [
{
"type": "Fiat",
"model": "500",
"color": "white",
"modalid": "fiatModal",
"params": [
{
"id": "numbers",
"name": "numbers",
"label":"Liczb razem",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "inline",
"name": "inline",
"label":"Liczb w zakładzie",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "mode",
"name": "mode",
"label":"Opis",
"type": "text",
"value": "Hello",
"class": "validate"
}
]
},
{ "type": "Cinquecento",
"model": "1100",
"color": "orange",
"modalid": "cinqueModal",
"params": [
{
"id": "numbers",
"name": "numbers",
"label":"Liczb razem",
"type": "number",
"value": "10",
"class": "validate"
},
{
"id": "inline",
"name": "inline",
"label":"Liczb Cinquecento",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "mode",
"name": "mode",
"label":"Opis Cinquecento",
"type": "text",
"value": "Hello",
"class": "validate"
}
]
},
{ "type": "Opel",
"model": "Corsa",
"color": "ecru",
"modalid": "corsaModal",
"params": [
{
"id": "numbers",
"name": "numbers",
"label":"Liczb Razem",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "inline",
"name": "inline",
"label":"Liczb w wierszu",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "mode",
"name": "mode",
"label":"Opis Opel",
"type": "text",
"value": "Hello",
"class": "validate"
}
]
},
{ "type": "BMW",
"model": "2500",
"color": "black",
"modalid": "bmwModal",
"params": [
{
"id": "numbers",
"name": "numbers",
"label":"Liczb razem",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "inline",
"name": "inline",
"label":"Liczb BMW",
"type": "text",
"value": "10",
"class": "validate"
},
{
"id": "mode",
"name": "mode",
"label":"Opis BMW",
"type": "text",
"value": "Hello",
"class": "validate"
}
]
}
];