Witam,
Mam za zadanie załadować JSONa i wyświetlić go w formie HTML. Dane powinny być wyświetlanie dynamicznie. Aktualnie uzyskuje efekt, gdzie wyświetlają mi się nazwy wszystkich głównych projektów, dopiero potem nazwy wszystkich podkatalogów. Oraz nie wiem jak dodać aby wyświetlanie było dopiero po kliknięciu. Poniżej mój kod.
Z góry dziękuję za pomoc.
Oczekiwana zasada działania:
Folder A -> po kliknięciu rozwija się lista z podkatalogami -> po naciśnięciu w podkatalog wyświetla się podsumowanie.
$(document).ready(function () {
$(function(){
var tree = $('#tree');
$(function(){
$.getJSON("https://api.myjson.com/bins/163p", function(data2){
for(var i=0; i<data2.results.length; i++){
$('#tab1').append("<li>"+data2.results[i].name+"</li>" + "<br></br>").click(function(){
$('#tab2').toogle();
});
for(var j=0;j<data2.results[i].projects.length; j++){
$('#tab2').append("<li>"+data2.results[i].projects[j].name+"</li>");
for(var k=0; k<data2.results[i].projects[j].hourCatalogues.length; k++){
$('#tab3').append("<li>"+data2.results[i].projects[j].hourCatalogues[k].name+"</li>") + "<br></br>";
}
}
}
});
});
});
$('#retrieve-resources').click(function () {
var displayResources = $('#display-resources');
var displayMainInfo = $('#main-info');
$.ajax({
type: "GET",
url: "https://api.myjson.com/bins/163p",
success: function (data) {
var output = "<table><thead><tr><th>Name</th><th>Scope</th><th>Status</th></thead><tbody>";
console.log(data);
// use loop to show the results, to do
var mainInfo = "<h1>RESULTS</h1><h2>TOTAL " + data.results[0].projects[1].hourCatalogues[1].summary.count.total + "</h2><h2>PASSED " + data.results[0].projects[1].hourCatalogues[1].summary.count.passed + "</h2><h2>FAILED " + data.results[0].projects[1].hourCatalogues[1].summary.count.failed + "</h2>";
displayMainInfo.html(mainInfo);
// in loop show the summary depends on results->projects->hourcatalogue, to do
for (var i = 0; i < data.results[0].projects[1].hourCatalogues[1].summary.result.length; i++) {
output += "<tr><td>" + data.results[0].projects[1].hourCatalogues[1].summary.result[i].name + "</td><td>" + data.results[0].projects[1].hourCatalogues[1].summary.result[i].scope + "</td><td>" + data.results[0].projects[1].hourCatalogues[1].summary.result[i].status + "</td></tr>";
}
output += "</tbody></table>";
displayResources.html(output);
$("table").addClass("table");
}
});
});
});