(function($, document) {
    //your code here;
    $.getJSON("/home/js/data.json", function(data){
        const committers = data.committers
        const projects = data.projects

        for (let i=0; i<committers.length; i++) {
            var image = "<div class='col-xs-8 padding-0 eclipsefdn-user-display-circle'><img class='img img-responsive' src=" + committers[i].image + "></div>"
            var content = " <div class='col-xs-16'>" + 
            "<h3 class='h4'><strong>" + committers[i].name + "</strong></h3>" + 
            "<p><strong>Committer to: </strong>" + committers[i]["Committer to"] + "</p>" + 
            "<p><strong>Committer since: </strong>" + committers[i]["Committer since"] + "</p>" + 
            "<a class='btn btn-primary' href='" + committers[i].url + "' title='Subscribe to our RSS-feed'> Read more </a>" + 
            "</div>"

            var result = "<div class='item clearfix block-summary-item match-height-item-by-row'>" + image + content + "</div>"

            $('#commiters-container').append(result)
        }

        for (let i=0; i<projects.length; i++) {
            var image = "<div class='col-xs-8 padding-0'><img class='img img-responsive' src=" + projects[i].image + "></div>"
            var content = " <div class='col-xs-16'>" + 
            "<h3 class='h4'><strong>" + projects[i].name + "</strong></h3>" + 
            "<p>" + projects[i].description + "</p>" + 
            "<a class='btn btn-primary' href='" + projects[i].url + "' title='Subscribe to our RSS-feed'> Read more </a>" + 
            "</div>"

            var result = "<div class='item clearfix block-summary-item match-height-item-by-row'>" + image + content + "</div>"

            $('#projects-container').append(result)
        }

    }).fail(function(){
        console.log("An error has occurred.");
    });

 })(jQuery, document);