48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
|
fetch("https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json").then(x => x.json()).then(y => megjelenit(y));
|
||
|
|
|
||
|
|
function megjelenit(tomb){
|
||
|
|
console.log(tomb);
|
||
|
|
let szoveg = "";
|
||
|
|
for (let elem of tomb) {
|
||
|
|
szoveg += "<option value=\"\">"+elem.name+"</option>";
|
||
|
|
}
|
||
|
|
document.getElementById("lenyilo").innerHTML = szoveg;
|
||
|
|
|
||
|
|
//////////////////////////////////////////////////////////////////
|
||
|
|
|
||
|
|
let szoveg2 = "";
|
||
|
|
for(let elem of tomb){
|
||
|
|
szoveg2 += "<tr>";
|
||
|
|
szoveg2 += "<td>";
|
||
|
|
szoveg2 += elem.name;
|
||
|
|
szoveg2 += "</td>";
|
||
|
|
szoveg2 += "<td>";
|
||
|
|
szoveg2 += elem.gender;
|
||
|
|
szoveg2 += "</td>";
|
||
|
|
szoveg2 += "<td>";
|
||
|
|
szoveg2 += elem.house;
|
||
|
|
szoveg2 += "</td>";
|
||
|
|
szoveg2 += "<td>";
|
||
|
|
szoveg2 += elem.actor;
|
||
|
|
szoveg2 += "</td>";
|
||
|
|
szoveg2 += "</tr>";
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("torzs").innerHTML = szoveg2;
|
||
|
|
|
||
|
|
///////////////////////////////////////////////////////////////////
|
||
|
|
let szoveg3 = "";
|
||
|
|
|
||
|
|
for (let elem of tomb) {
|
||
|
|
szoveg3 += '<div class="col-md-4 col-sm-6">';
|
||
|
|
szoveg3+= '<img class="img-fluid w-75" src="' +elem.image+ '">'
|
||
|
|
szoveg3 += '<br>';
|
||
|
|
szoveg3+= '<div style="font-style: italic; text-align:center; padding: 10px;">';
|
||
|
|
szoveg3 += elem.name
|
||
|
|
szoveg3 += '</div>';
|
||
|
|
szoveg3 += '</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("kepek").innerHTML = szoveg3;
|
||
|
|
|
||
|
|
}
|