如何为目录中的每个文件夹动态创建HTML对象,其中每个文件夹包含要引用到对象中的JSON数据?

I'm currently building a reporting tool where I make several standardised reports. The reports work by an ajax call to assign json data to a relevant id, and the path to the data is dependant on a user parameter passed through the url - (each report corresponds to a user). These ids are then assigned in the html and display various metrics about a user.

The structure of the directory where json data is saved for users is as follows:

Data---->[USER FOLDER]------>data.json, data2.json etc

The naming convention is conserved between users.

The problem i am having is creating a separate page which is dynamically populated with several divs that correspond and link to the reports for each user, whilst also showing a small subset of the data within the div on the list page.

I was wondering if anyone would be able to help me solve this problem? I've been trying to solve this problem for the last 6 hours and I'm starting to lose the will to live...

I'm probably being an idiot but any help would be much appreciated!

Some code - (edited for clarity/structure so might have errors but thats not the problem - problem is general approach to dynamically creating the divs for each folder): HTML:

<!DOCTYPE html>
<html lang="en">
<script src="singleparams.js"></script>
<script src="updateparams.js"></script>
</head>
<body>
<section class="user-stats">
<div class="container">
<div class="data-metric">
<p id="followers"></p>
<p id="name"></p>
<p id="description"></p>
</body>
etc etc etc 

jquery: singleparams.js:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

jQuery(document).ready(function($) {



  var user = getUrlVars()["user"];
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "http://localhost:8080/data/"+user+"/dash/display_name.json",
    "method": "GET"
  }

  $.ajax(settings).done(function (response) {
    console.log(response);

    var content = response;
    $("#name").append(content);

etc etc etc etc for each parameter/id i want to show

});

So I want to create a second html page, with a div for each user in the data directory which references the #name, #description, #follower ids (or any other stat), and the created div links to a report for each user (link is just an html report with user parameter passed through like wwww.website.com/report?user=USER).

Thanks for any help in advance!