Przetwarzanie JSONa w pętli i zdarzenia click

0

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");
            }
        });
    });
});

1

Wystarczy dodać event do div-matka który będzię w div-corka zmieniał klasy css.

Przykład:

html

<div id="mother">
matka
<div id="daughter" class="hide">corka</div>
</div>

css

.hide{
display: none;
}

javascript

const mother = document.getElementById('mother')
const daughter = document.getElementById('daughter')

mother.addEventListener('click', () => {
daughter.classList.toggle('hide')
})

Nie trzeba dwa razy pobierac tych samych danych tak jak to zrobiles, wystarczy wszystko od razu wrzucic do html i dac odpowiednia klase elementom, ktore maja byc ukryte

1 użytkowników online, w tym zalogowanych: 0, gości: 1