JSON object with arrays converted to HTML table
<p>the below code is the JSON response i recieve from an API. unfortunately i cannot change the way this response is sent, i can only use this response as is within the scope of Javascript/jQuery.</p>

<p>My goal is to transform this into a HTML table.</p>

<p>I have attempted to do this already myself;</p>

<pre><code>function CreateTableView(objArray, theme, enableHeader) {
    // set optional theme parameter
    if (theme === undefined) {
        theme = 'mediumTable'; //default theme
    }

    if (enableHeader === undefined) {
        enableHeader = true; //default enable headers
    }

    // If the returned data is an object do nothing, else try to parse
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '&lt;table id="res" class="' + theme + '"&gt;';

    // table head
    if (enableHeader) {
        str += '&lt;thead&gt;&lt;tr&gt;';
        for (var index in array[0]) {
            str += '&lt;th scope="col"&gt;' + index.toUpperCase() + '&lt;/th&gt;';
        }
        str += '&lt;/tr&gt;&lt;/thead&gt;';
    }

    // table body
    str += '&lt;tbody&gt;';
    for (var i = 0; i &lt; array.length; i++) {
        str += (i % 2 == 0) ? '&lt;tr class="alt" id="' + array[i]['id'] + '"&gt;' : '&lt;tr id="' + array[i]['id'] + '"&gt;';
        for (var index in array[i]) {
            str += '&lt;td style="width:15%;"&gt;' + htmlspecialchars_decode(array[i][index]) + '&lt;/td&gt;';
        }
        str += '&lt;td&gt;&lt;a href="#" onClick="editPerson(' + array[i]['id'] + ');"&gt;Edit&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="#" onClick="delPerson(' + array[i]['id'] + ');"&gt;Delete&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';
    }
    str += '&lt;/tbody&gt;'
    str += '&lt;/table&gt;';
    return str;
}
</code></pre>

<p>However I am only able to get the headers to show... But it works well if the JSON response has only one array ie one row returned.</p>

<p>the code above was adapted from several other questions like this on Stackoverflow, I have spent days on this and cannot get these results to show in a table... This is just one example of many other that are returned just like this example and i will need to reuse this solution many times making it very important to me.</p>

<pre><code>"ItemArray":{
        "id":"14"
        ,"0":
            {"id":"1","username":"guest","fname":"Guest","lname":"User","email":"example@domain.com","group":"member","active":"0","url":null,"last_activity":null}
        ,"1":
            {"id":"2","username":"system","fname":"Internal","lname":"System","email":"example@domain.com","group":"member","active":"0","url":null,"last_activity":null}
        ,"2":
            {"id":"3","username":"master","fname":"Super","lname":"Admin","email":"example@domain.com","group":"member","active":"0","url":null,"last_activity":null}
        ,"3":
            {"id":"14","username":"apitest","fname":"API","lname":"Test","email":"user@domain.com","group":"member","active":"0","url":null,"last_activity":"2012-10-29 02:48:43"}
        }
</code></pre>
